Jquery改变焦点输入

Jquery changing focused input

本文关键字：输入 焦点 改变 Jquery      更新时间：2023-09-26

我试图使一个系统，当我填写一个文本框它移动到下一个。目前我有这个代码:

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

我想让这个继续，所以它会继续回显#txt3 #txt4等。也会有一种方法来改变焦点文本框通过箭头键。例如，当按向上方向键时，所选#txt4变为#txt3，按向下方向键则相反。

下面是解决第一个问题的代码。为了方便起见，我添加了一个class属性，并将"maxlength"属性替换为HTML的"size"属性。

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

});

你可以在这里试试

我对你关于箭头键绑定的要求有疑问。如果用户想要在其中一个输入中导航，会发生什么?尽管如此，下面是考虑到箭头键的代码:

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

});

你可以在这里试试

你可以有一个按键事件，检查按下的键，并根据按下的键采取必要的行动!EDIT:您可以通过在函数调用

中传递参数来知道按下了哪个键
.keypress(function(e))
{
    if(e.which == 13)
       //take necessary action for enter key
    etc
}

绑定keydown事件并检查event.which是否正确:

  • 左:37
    • 38
  • :
  • 右:39
    • 40
  • :
相关文章：