Question

我目前正在使用jQuery liveform validation插件来验证输入列是否符合条件，如果输入按钮达到最大输入，我会使用下面的代码强制下一个。

window.onload=function(){
    var container = document.getElementsByClassName("container")[0];
    container.onkeyup = function(e) {
        var target = e.srcElement;
        var maxLength = parseInt(target.attributes["maxlength"].value, 10);
        var myLength = target.value.length;
        if (myLength >= maxLength) {
            var next = target;
            while (next = next.nextElementSibling) {
                if (next == null)
                    break;
                if (next.tagName.toLowerCase() == "input") {
                    next.focus();
                    break;
                }
            }
        }
    }
}

这是我的表单代码：

    <span class="label">Date:</span> <input type="text" id="f1" name="day" maxlength="2" placeholder="DD" /><br /><br />            
    <span class="label">Month:</span> <input type="text" id="f2" name="month" maxlength="2" placeholder="MM" /><br /><br />
    <span class="label">Year:</span> <input type="text" id="f3" name="year" maxlength="4" placeholder="YYYY" /><br /><br />
    <script type="text/javascript">
    //<![CDATA[
    // Validate day column:
    var f1 = new LiveValidation('f1');
    f1.add( Validate.Numericality, { minimum: 1, maximum: 31 } );
    // Validate month column:
    var f2 = new LiveValidation('f2');
    f2.add( Validate.Numericality, { minimum: 1, maximum: 12 } );
    // Validate year column:
    var f3 = new LiveValidation('f3');
    f3.add( Validate.Numericality, { minimum: 1940, maximum: 2021 } );
    //]]>
    </script>

我遇到的问题是，例如，如果输入日期（f1）输入33，这是无效的，javascript将自动在monh（f2）输入旁边等等。

我的问题是：如果符合条件，是否可以将javascript更改为仅强制下一个？例如，如果输入日（f1）数据在1到31之间，则强制到下一个输入，如果数据超出范围，它将不强制下一个输入并清除（f1）输入框。 / p>

jsFiddle Demo

Answer 1

请检查更新的小提琴：http://jsfiddle.net/TGeKS/3/

//<![CDATA[ 
window.onload=function(){
    var container = document.getElementsByClassName("container")[0];
    container.onkeyup = function(e) {
        var target = e.srcElement;
        var maxLength = parseInt(target.attributes["maxlength"].value, 10);
        var myLength = target.value.length;
        if (myLength >= maxLength) {
            var next = target;
            while (next = next.nextElementSibling) {
                if (next == null)
                    break;
                if (next.tagName.toLowerCase() == "input") {
                    next.focus();
                    break;
                }
            }
        }
    }
}
// Validate day column:
var f1 = new LiveValidation('f1', {
    wait: 750,
    onValid: function() {
        this.insertMessage( this.createMessageSpan() ); this.addFieldClass();
        document.getElementById("f2").focus();
    }
});
f1.add(Validate.Numericality, {
    minimum: 1,
    maximum: 31
});
// Validate month column:
var f2 = new LiveValidation('f2', {
        wait: 750,
        onValid: function() {
            this.insertMessage( this.createMessageSpan() ); this.addFieldClass();
            document.getElementById("f3").focus();
        }
    });
f2.add(Validate.Numericality, {
    minimum: 1,
    maximum: 12
});
// Validate year column:
var f3 = new LiveValidation('f3');
f3.add(Validate.Numericality, {
    minimum: 1940,
    maximum: 2021
});
//]]>

想法：正如文档中提到的，http://livevalidation.com/documentation#LiveValidation，我们可以在onValid属性中定义对象并传递自定义函数。但是有一个问题，LiveValidation在每次按键上都会触发有效事件，如“1”和＆amp; “12”中的“2”因此还有一个名为“wait”的有用选项，以毫秒为单位设置为“750”，如果需要，可以对其进行微调。

如果条件满足，javascript强制下一次输入

1 个答案: