Question

我有5个文本框

<input type ="text" size="3" name="r"><br>
<input type ="text" size="3" id="1" onchange="vali(this.id)" name="I"><br>
<input type ="text" size="3" name="a"><br>
<input type ="text" size="3" name="s"><br>
<input type ="text" size="3"  name="e">
function vali(d){
if(document.getElementById(d).value <0 || document.getElementById(d).value >=30)}

我希望用户在0和0之间的每个字段上只输入最多2位数字。 30.我无法限制用户在字段中仅输入2位数，例如当用户输入151时，15应该在第1个字段上，然后焦点将自动进入第2个字段，剩余数字将输入到第2个字段中将在那里直到用户输入另一个数字。进入焦点之后将会出现在第3场。另外，我需要检查每个字段是否包含0到30之间的数字，我在上面的代码中检查。此外，当用户提交表单时，应检查所有字段之间的值（0到30）如果有任何字段存在警告bos应该弹出其他转到下一页。我不能做这部分。这是我上面的表单部分5输入字段

<form name="detail" action ="selectjzone.jsp" onsubmit="return validate(this)">

和编辑的部分是

if (num < 0) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " " +  "is  outside the range0 to 30" );
return false;
} else if (num > 30) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " "+      "is  outside the range0 to 30" );
return false;
}
    return true;

}

Answer 1

以下是如何验证字段并将任何额外内容移至下一个字段的开始：

此处的演示演示：http://jsfiddle.net/jfriend00/vpTq5/

HTML：

<input id="a" type ="text" size="3" onkeyup="validate(this, 'b')" name="r"><br>
<input id="b" type ="text" size="3" onkeyup="validate(this, 'c')" name="I"><br>
<input id="c" type ="text" size="3" onkeyup="validate(this, 'd')" name="a"><br>
<input id="d" type ="text" size="3" onkeyup="validate(this, 'e')" name="s"><br>
<input id="e" type ="text" size="3" onkeyup="validate(this)" name="e">

使用Javascript：

function validate(obj, next) {
    // fetch value and remove any non-digits
    // you could write more code to prevent typing of non-digits
    var orig = obj.value;
    var mod = orig.replace(/\D/g, "");
    var nextObj;
    // check length and put excess in next field
    if (mod.length > 2) {
        // shorten the current value
        obj.value = mod.substring(0,2);
        if (next) {
            // put leftover into following value
            var nextObj = document.getElementById(next);
            if (!nextObj.value) {
                nextObj.value = mod.substring(2);
                nextObj.focus();
            }
        }
    } else {
        // only set this if necessary to prevent losing cursor position
        if (orig != mod) {
            obj.value = mod;
        }
    }
    // convert to number and check value of the number
    var num = Number(obj.value);

    // don't know what you want to do here if the two digit value is out of range
    if (num < 0) {
        obj.value = "0";
    } else if (num > 30) {
        obj.value = "30";
    }
}

一些注意事项：

HTML对象上的Id值不能以数字开头。他们必须以一封信开头。
当输入大于30的数字时，您必须决定所需的行为。
请记住，输入字段值是字符串。如果您想将它们视为数字，则必须将它们转换为数字。
使用更多代码，您实际上可以防止键入非数字键，并且可以在键入第3个值之前移动焦点。
有一些方法可以将数据输入到不触发onkeyup（复制/粘贴，拖放）的字段中，因此您也必须在其他时间进行验证。
如果你可以使用像jQuery这样的框架，可以用更简单的方式完成。

Answer 2

以下是您继续输入时自动关注下一个字段的代码，

你需要在0和0之间采用验证号码。 30.希望这会有所帮助，

<script>
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
function chkEvent(e){
    var keyCode = (isNN) ? e.which : e.keyCode;
    if(e.shiftKey==1 && keyCode == 9) return false;
    if(e.shiftKey==1 || keyCode == 9 || keyCode == 16) return false;
    return true;
}
function autoTab(current,to, e) {
    var keyCode = (isNN) ? e.which : e.keyCode;
    var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
    if(current.getAttribute && current.value.length == current.getAttribute("maxlength") && !containsElement(filter,keyCode)) to.focus();
    function containsElement(arr, ele) {
        var found = false, index = 0;
        while(!found && index < arr.length) if(arr[index] == ele) found = true; else index++;
        return found;
    }
    return true;
}
</script>

<input type ="text" size="3" maxlength="2" name="r" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('1'), event);}"><br>
<input type ="text" size="3" maxlength="2" id="1" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('a'), event);}" name="I"><br>
<input type ="text" size="3" maxlength="2" id="a" name="a" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('s'), event);}"><br>
<input type ="text" size="3" maxlength="2" id="s" name="s" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('e'), event);}"><br>
<input type ="text" size="3"  maxlength="2" id="e" name="e" >

Answer 3

使用maxlength属性限制输入次数

maxlength="2"

设置完上述内容后，您可以使用onkeyup事件检查长度并更改焦点

       $('#target').keyup(function () {
            var maxlength = $(this).attr('maxlength');
            if ($(this).val().trim().length == maxlength){
               //change focus to next input
                //change focus to next input
                var inputs = $(this).closest('form').find(':input');
                inputs.eq(inputs.index(this) + 1).focus();
            }  
        });

Answer 4

这是纯粹的JavaScript解决方案，它就像你想要的一样吗？

http://jsfiddle.net/rfyC8/

代码：

var ieEvents = !!document.attachEvent,
    addEvent = ieEvents ? "attachEvent" : "addEventListener",
        keyUp = ieEvents ? "onkeyup" : "keyup";

function validator( e ) {
var sib, intValue, val = this.value;
    if( val.length >= 2 ) {

    intValue = parseInt( val, 10 );

        if( isNaN( intValue ) || intValue < 0 || intValue > 30 ) {
        this.value = "";
        return false;   
        }

    sib = this.nextSibling;
        while( sib && sib.className != "textfield" ) {
        sib = sib.nextSibling;   
        }

        if( sib ) {
        sib.focus();
        }
        else {
        return false;   
        }
    }

}

document.getElementById("textfields")[addEvent]( keyUp,

    function(){
    var e = arguments[0] || window.event,
        target = e.target || e.srcElement;

        if( target.className == "textfield" ) {

        validator.call( target, e );
        }

    },

    false
);

如何动态检查在文本框中输入的数字？

4 个答案: