如何在填充4个字符后移动下一个输入TAB
how to move next input tab after fill 4 characters
我有另一个问题,我已经填写了所有字段,如果我需要改变数字第二或第三个字段。
我试过下面的代码,
(function (){
$("#num1, #num2, #num3, #num4").on("keyup", function (t) {
//add the key's you want to accept such as backspace or arrow keys etc.
if (t.keyCode != 13 && t.keyCode != 8 && t.keyCode != 37 && t.keyCode != 38 && t.keyCode != 39 && t.button != 1 && t.button != 2 && t.button != 3) {
var maxlength = 4;
var num1 = $("#num1").val().length;
var num2 = $("#num2").val().length;
var num3 = $("#num3").val().length;
var num4 = $("#num4").val().length;
$(this).val($(this).val().replace(/[^0-9'.]/g,''));
if ( num1 >= 4) {
$("#num2").focus();
}
if( num2 >= 4){
$("#num3").focus();
}
if( num3 >= 4){
$("#num4").focus();
}
if (num4>=4){
$("#num4").val($("#num4").val().substr(0,4));
}
}
});
})();
您粘贴的代码有错误的if语句。让我们试着理解这个问题。以下是你的代码如何工作
第一个字段的输入值。达到四个字符下一步去。在第二个字段输入。达到四个字符下一步去。第三个字段输入。达到四个字符下一步去。在第四个字段输入。达到四个字符停止
现在的问题是当你开始编辑。当你编辑第二行的时候。你的if命令同时告诉检查第三行和第四行。所以如果第三行有四个字符,就转到第四行。如果第四行有四个字符,停止。因此,除非您删除第三行和第四行所写的内容,否则您无法编辑第二行。
下面由Bhavesh分享的链接正是你想要的。根据需要将最大限制增加到4。但是我希望你能明白问题出在哪里,这样你以后就不会犯类似的错误了。
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
JSFIDDLE链接
我很忙,但我用一个简单的方法解决了你的问题。
将Jquery更改为
(function (){
$("#num1, #num2, #num3, #num4").on("keydown", function (t) {
//add the key's you want to accept such as backspace or arrow keys etc.
if (t.keyCode != 13 && t.keyCode != 8 && t.keyCode != 37 && t.keyCode != 38 && t.keyCode != 39 && t.button != 1 && t.button != 2 && t.button != 3) {
var maxlength = 4;
var num1 = $("#num1").val().length;
var num2 = $("#num2").val().length;
var num3 = $("#num3").val().length;
var num4 = $("#num4").val().length;
$(this).val($(this).val().replace(/[^0-9'.]/g,''));
if (num1 >= 4) {
$("#num2").focus();
}
if(num1 >= 4 && num2 >= 4){
$("#num3").focus();
}
if((num1 >= 4 && num2 >= 4) && num3 >= 4){
$("#num4").focus();
}
if ((num1 >= 4 && num2) && (num3 >= 4 && num4)){
$("#num4").val($("#num4").val().substr(0,3));
}
}
});
})();
http://jsfiddle.net/j42Jx/9/相关文章:
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- JQuery insertAfter();移动下一个表格单元格
- 我们如何捕捉移动设备“;下一个“;在Javascript中按键
- 如何移动到数组的上一个/下一个索引键
- 字段验证器,它不允许移动到下一个字段
- 当一个字段已满时,将数据条目移动到下一个字段-JS制表
- 更改移动到phonegap中的下一个活动的风格-移动android
- 在动态创建的输入上使用向下箭头键将光标移动到下一个输入
- Jquery方法选择,用于移动到下一个父子
- 确定 Javascript 中图像轮播的下一个正确移动
- 如何在使用angularjs选项卡时单击按钮移动到下一个选项卡
- 如何在测验应用中移动到下一个或上一个问题
- 如果用户不更改该选项,请将焦点移动到下一个字段
- 如果不在表单中填写一个字段,我的光标不应该移动到 javascript 验证中的下一个字段
- 如果删除了 localStorage 密钥,请将所有下一个密钥移动 1 位
- AngularJS:单选按钮在移动到下一个部分后失去价值
- 选择1后无法切换以移动到下一个案例
- 如何停止滚动或移动下一个标签,如果我的javascript函数返回false
- 如何使一个文本滑块移动下一个或上一个在javascript
- 如何在填充4个字符后移动下一个输入TAB