只读 <input> 防止向不同元素添加值

Question

我有一系列 <input> 元素和一个相应的脚本，可以在键入后自动聚焦下一个框。此外还有一个只读元素，它纯粹是为了向用户提供上下文。

只读元素阻止在 #DialFifth 中键入值。我试图使用属性选择器来防止使用 readonly 拾取元素，但这似乎不起作用。

请查看代码段 - 有什么想法吗？

$(':input').keypress(function() {
  $(this).next(':input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="DialFirst" name="DialFirst" type="text" value="" />
<input id="DialSecond" name="DialSecond" type="text" value="" />
<input id="DialThird" name="DialThird" type="text" value="" />
<input id="DialFourth" name="DialFourth" type="text" value="" />
<input id="DialFifth" name="DialFifth" type="text" value="" /> <!--Unable to type into this box-->
<input id="DialFinal" name="DialFinal" type="text" readonly="readonly" value="0" />

Answer 1

问题与更改值和触发事件的顺序有关。要执行您需要的操作，请改用 keyup：

$(':input').keyup(function() {
    $(this).next(':input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="DialFirst" name="DialFirst" type="text" value="" />
<input id="DialSecond" name="DialSecond" type="text" value="" />
<input id="DialThird" name="DialThird" type="text" value="" />
<input id="DialFourth" name="DialFourth" type="text" value="" />
<input id="DialFifth" name="DialFifth" type="text" value="" />
<input id="DialFinal" name="DialFinal" type="text" readonly="readonly" value="0" />

只读 <input> 防止向不同元素添加值

Read only <input> prevents adding value to different element

jquery

jquery-selectors

jquery-events