Question

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

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

我希望继续这样做，以便继续回复#txt3 #txt4等。还有一种方法可以通过箭头键更改聚焦文本框。例如。当按下向上箭头键时，选择从#txt4更改为#txt3，而向下键则相反。

提前致谢。

Answer 1

以下是解决第一个问题的代码。为方便起见，我添加了一个类属性，并替换了＆＃34; maxlength＆＃34;属性由HTML＆＃34; size＆＃34;属性。

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

}）;

You can try it here

我对你关于箭头键绑定的请求表示怀疑。如果用户想要在其中一个输入中导航，会发生什么？不过，这里是考虑箭头键的代码：

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

}）;

You can try it here

Answer 2

您可以使用按键事件检查按下的按键，并根据按下的按键采取必要的操作！编辑：您可以通过在函数调用中传递参数来了解按下了哪个键

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

Answer 3

绑定keydown事件并检查正确的event.which：

左：37
Up：38
右：39
Down：40

Jquery改变了重点输入

3 个答案: