Jquery改变焦点输入

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

 $('#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>

$('.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
:

相关内容

最新更新

热门标签：