javascript - Treating iPad's `Return` as `Tab` -

how can cause return key on ipad's keyboard behave tab key when in html form?

my current solution this:

$('input[type=text]').keydown(function(e) {   if (e.keycode == 13)   {     e.preventdefault();     $(this).nextall('input[type=text]:first').focus();   } }); 

i found solution in link below, works in jsfiddle included in comments of answer.

• jquery how make enter (return) act tab key through input text fields in end trigger submit button

this solution not working in case though (on ipad or pc). based on comments, think might html structure causing trouble though not sure how alter achieve same layout.

how else can cause return key jump next input field?

my form's html block below (skip avoid long html read):

<div class="row">   <div class="span6">     <div class="control-group" id="guestname_group">       <label class="control-label" for="textbox_name"><i class="icon-user"></i> guest name</label>       <div class="controls controls-row">         <input type="text" class="span6" id="textbox_name" data-provide="typeahead"  placeholder="lastname, firstname">       </div>     </div>     <div class="control-group">       <label class="control-label" for="textbox_group"><i class="icon-home"></i> organization</label>       <div class="controls controls-row">         <input type="text" class="span6" id="textbox_group" placeholder="organization">       </div>     </div>   </div>   <div class="span6">     <div class="control-group">       <label class="control-label" for="select_host"><i class="icon-star"></i> aoelab host name</label>       <div class="controls controls-row">         <select class="span6" id="select_host">           {% person in host_names %}           <option value="{{ person.bems }}">{{ person.name }}</option>           {% endfor %}         </select>       </div>     </div>     <div class="control-group">       <label class="control-label" for="textarea_purpose"><i class="icon-question-sign"></i> purpose</label>       <div class="controls controls-row">         <label class="radio inline">           <input type="radio" name="optionspurpose" id="radio_purpose1" value="meeting" checked>           meeting         </label>         <label class="radio inline">           <input type="radio" name="optionspurpose" id="radio_purpose2" value="tour">           tour         </label>         <label class="radio inline">           <input type="radio" name="optionspurpose" id="radio_purpose3" value="other">           other...         </label>       </div>       <div class="controls controls-row">         <textarea class="span6" id="textarea_purpose" placeholder="why here?"></textarea>       </div>     </div>   </div> </div> 

$('input[type=text]').on('keydown', function (e) {     if (e.which == 13) {         var tabables = $("*[tabindex != '-1']:visible"),              index = tabables.index(this);          tabables.eq(index + 1).focus();         e.preventdefault();     } }); 

fiddle