jQuery更改焦点输入

Question

我正在尝试创建一个系统，当我填充文本框时它将移至下一个。 目前，我有以下代码：

 $('#txt1').keyup(function() {
    if(this.value.length == $(this).attr('maxlength')) {
       $('#txt2').focus();
    }
 });

我要继续进行操作，以便继续回显#txt3 #txt4 #txt3 ect。 也将有一种方法可以通过箭头键更改焦点文本框。 当向上箭头键被按下选择EG从改变#txt4到#txt3和相对的下键。

提前致谢。

Answer 1

这是解决第一个问题的代码。 为了方便起见，我添加了一个类属性，并用HTML的“大小”属性替换了“最大长度”属性。

HTML

<p><input type="text" class="navigable" id="txt1" data-number="1" size="2" placeholder="dd"></p>
<p><input type="text" class="navigable" id="txt2" data-number="2" size="2" placeholder="mm"></p>      
<p><input type="text" class="navigable" id="txt3" data-number="3" size="4" placeholder="yyyy"></p>     

JS

$('.navigable').keyup(function() {
var self = $(this);
var next = $('#txt'+(self.data('number')+1));
if(next.length > 0 && self.val().length == self.attr('size')) {
   next.focus();
}

}）;

你可以在这里尝试

我对您对箭头键绑定的要求感到怀疑。 如果用户想在输入之一中导航，会发生什么？ 不过，以下是考虑箭头键的代码：

HTML

<p><input type="text" class="navigable" id="txt1" data-number="1" size="2" placeholder="dd"></p>
<p><input type="text" class="navigable" id="txt2" data-number="2" size="2" placeholder="mm"></p>
<p><input type="text" class="navigable" id="txt3" data-number="3" size="4" placeholder="yyyy"></p>

JS

$('.navigable').keyup(function(e) {
  var self = $(this);
  var currentInput = self.data('number');
  var next = $('#txt'+ (currentInput + 1));
  var previous = $('#txt'+ (currentInput - 1));
  var keyCode = e.keyCode || e.which;
  if(next.length && keyCode === 40)
      next.focus();
  else if(previous.length && keyCode === 38)
      previous.focus();
  else if(next.length && self.val().length == self.attr('size')) {
     next.focus();
  }

}）;

你可以在这里尝试

Answer 2

您可以有一个按键事件，该事件会检查按键是否按下，并根据按键执行必要的操作！ 编辑 ：您可以通过在函数调用中传递参数来知道按下了哪个键

.keypress(function(e))
{
    if(e.which == 13)
       //take necessary action for enter key
    etc
}

Answer 3

绑定一个keydown事件并检查适当的event.which 。

• 左：37
• 上：38
• 右：39
• 下：40