javascript - Jquery:强制光标优雅地进入下一个输入字段？

Question

我有 4 个输入字段并排在一起。

我试图强制用户在每个输入字段中输入 1 个字符，一旦他们输入 1 个字符，他们就需要在下一个字段中输入下一个字符，直到输入完成。

但是我当前的代码到处都是，我无法弄清楚我需要做什么才能实现这一目标。

这是我的代码:

https://jsfiddle.net/ej9tvosj/

$('.inps').keydown(function (event) {
    // check for hyphen
var myLength = $(this).val().length;

if(myLength ==0){
$(this).next('.inps').focus();
}


});

如果您在第一个字段中输入内容，它会跳转到下一个字段，但之后会变得一团糟。

有人可以就此问题提出建议吗？

Answer 1

您需要尝试使用 on input 监听器来检测输入的变化，而不是 keyup，因为您需要确保在更改焦点之前输入了一个字符。

$(document).on('input', '.inps', function (event) {
   // check for hyphen
	var myLength = $(this).val().trim().length;
  if(myLength ==1){
    $(this).next('.inps').focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inps" >
<input type="text" class="inps" >
<input type="text" class="inps" >
<input type="text" class="inps" >