Question

是否有人能够帮助我，

我有一个表单，一旦用户输入了表单字段的值，我希望焦点移动到下一个字段。

表单已经使用html和css创建，理想情况下会像javascript事件一样来促进这一点。

我已经尝试了这个并玩了几个小时，但我似乎无法解决它并且无法让它工作。

我在下面附上了一些代码，以向您展示我的进展。（只有html和javascript，没有CSS样式

任何帮助将不胜感激，

有没有具体的准备好为什么重点不会转移到下一个领域？

<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

好的，我会怎么做呢

＆＃13;

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
    }
  }
});

＆＃13;

<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>

＆＃13;

当用户按下回车键时，关注下一个表单字段？

1 个答案: