当用户按下Enter时将焦点放在下一个表单字段上吗？

Question

Is anyone able to help me out,

I have a form and I want the focus to move onto the next field, once the user has entered a value for a form field.

the form has been created using html and css, and would ideally like a javascript event to faciliate this.

I've already tried this and played around with it for a couple of hours but I can't seem to crack it and can't get it to work.

I have attached some code below, to show you my progress. (only html and javascript, there is no CSS styling

any help would be greatly appreciated,

Is there a specific ready why the focus is not moving on to the next field?

<script> 
// register jQuery extension
jQuery.extend(jQuery.expr[':'], {
focusable: function (el, index, selector) {
    return $(el).is('a, button, :input, [tabindex]');
 }
});

$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
       // Get all focusable elements on the page
      var $canfocus = $(':focusable');
      var index = $canfocus.index(document.activeElement) + 1;
      if (index >= $canfocus.length) index = 0;
      $canfocus.eq(index).focus();
   }
  });

https://jsfiddle.net/4wz9fapm/

Answer 1

Ok here's how I would do it then

 var $inputs = $("input"); // get all inputs first $inputs.keypress(function(e) { if (e.which == 13) { e.preventDefault(); var index = $inputs.index(this) + 1; // get next index of input if (index < $inputs.length) { // check if not last input $inputs.eq(index).get(0).focus(); // focus next } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="form-field first_name pd-text required required-custom "> <label class="field-label" for="190502_34068pi_190502_34068">Please enter your first name so I can start your quote... *</label> <input type="text" name="190502_34068pi_190502_34068" id="190502_34068pi_190502_34068" value="yug" class="text" size="30" maxlength="40" onchange="" /> </p> <div id="error_for_190502_34068pi_190502_34068" style="display:none"></div> <p class="form-field last_name pd-text required required-custom "> <label class="field-label" for="190502_34070pi_190502_34070">Thank you, please could you let me know your last name... *</label> <input type="text" name="190502_34070pi_190502_34070" id="190502_34070pi_190502_34070" value="hjgv" class="text" size="30" maxlength="80" onchange="" /> </p> <div id="error_for_190502_34070pi_190502_34070" style="display:none"></div> <p class="form-field email pd-text required required-custom "> <label class="field-label" for="190502_34072pi_190502_34072">Awesome! Please could you provide me your email address so that I can send your quote documents to you... *</label> <input type="text" name="190502_34072pi_190502_34072" id="190502_34072pi_190502_34072" value="luke.james@hotmail.com" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 190502, 34072, 162304018);" /><br/><span class="description">Not yug hjgv? <a target="_self" href="/form/incorrectProspect/account_id/190502/campaign_id/8424/form_id/4218">Click Here</a>.</span> </p> <div id="error_for_190502_34072pi_190502_34072" style="display:none"></div> <p class="form-field phone pd-text required required-custom "> <label class="field-label" for="190502_34074pi_190502_34074">Do you have a contact number? *</label> <input type="text" name="190502_34074pi_190502_34074" id="190502_34074pi_190502_34074" value="07949370851" class="text" size="30" maxlength="40" onchange="" /> </p> <div id="error_for_190502_34074pi_190502_34074" style="display:none"></div> <p class="form-field company pd-text required required-custom "> <label class="field-label" for="190502_34076pi_190502_34076">Thank you! And what is your business name? If you trade in your own name then that's fine - simply enter your full name *</label> <input type="text" name="190502_34076pi_190502_34076" id="190502_34076pi_190502_34076" value="uguig" class="text" size="30" maxlength="255" onchange="" /> </p> <div id="error_for_190502_34076pi_190502_34076" style="display:none"></div> <p class="form-field Marketing_Preferences pd-checkbox required required-custom"> <label class="field=label" for="190502_34174pi_190502_34174">Occasionally we may wish to contact you to let you know about special offers and products : *</label> <span class="value"><span><input type="checkbox" name="190502_34174pi_190502_34174_287262" id="190502_34174pi_190502_34174_287262" value="287262" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287262">Email</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287264" id="190502_34174pi_190502_34174_287264" value="287264" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287264">Phone</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287266" id="190502_34174pi_190502_34174_287266" value="287266" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287266">Text</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287268" id="190502_34174pi_190502_34174_287268" value="287268" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287268">None</label></span><span><input type="checkbox" name="190502_34174pi_190502_34174_287270" id="190502_34174pi_190502_34174_287270" value="287270" onchange="" /><label class="inline" for="190502_34174pi_190502_34174_287270">All</label></span></span> </p> <div id="error_for_190502_34174pi_190502_34174" style="display:none"></div>