Question

这是其他人的代码，我对JS很新，所以发现它很难理解。

我已经尝试在达到最大限制后自动切换到下一个输入。

我遇到的问题是年份的输入是在完全进入全年之前的标签。

如果有人能够指出我的方向非常有帮助。

JS Bin： https://jsbin.com/wazarezufi/edit?js,output

"use strict";

var parts = el.find('input');

 function constructor(el) {
    console.log('running');

    $('input').on('keyup', _.bind(onKeyup, this))
        .on('keypress', _.bind(onKeypress, this))
        .on('focus', focus)
        .on('paste', _.bind(paste, this));
}

function paste(evt) {
    // allows pasting of dates in
    var str = evt.originalEvent.clipboardData.getData('text/plain'),
        bits;
    if (str && (bits = /(\d\d)[\/\\.-]?(\d\d)[\/\\.-]?(\d\d\d\d)/.exec(str))) {
        parts.each(function (idx) {
            $(this).val(bits[idx + 1]);
        })
        return false;
    }
}

function onKeypressDef(e) {
    var el = e.target;
    var val;
    // find the target in our list
    for (var idx = 0; idx < parts.length; idx++) {
        if (parts[idx] === el) break;
    }
    if ((val = $(el).val()).length == 2) {

        if (idx < parts.length - 1) {
            parts[idx + 1].select();
        }
    }

}

function focus() {
    $(this.select());
};

function onKeyup(e) { // needed to trap the backspace
    console.log('keyup');
    if (e.which === 8) {
        onKeypress.call(this, e);
    }
}

function onKeypress(e) {
    var self = this;
    var evt = e;
    if ((evt.which > 32) && (/\D/.test(String.fromCharCode(evt.which)))) return false; // only let numeric chars through
    _.defer(function () {
        onKeypressDef.call(self, evt);
    });
}
 constructor();

由于

Answer 1

问题在于对任何输入执行此操作：

if ((val = $(el).val()).length == 2)

你应该检查（通过id，例如）哪个输入触发了事件，并根据情况将长度与2或4进行比较。

Answer 2

更新了小提琴 - https://jsbin.com/vojojufabe/edit?js,output 问题是在输入数据时检查长度，当长度为2时，它跳转到下一个输入，添加了isyear数据属性，并检查它的长度是4个字符

if (!isYear && val=== 2) {

    if (idx < parts.length - 1) {
        parts[idx + 1].select();
    }
}
if (isYear && val=== 4) {

    if (idx < parts.length - 1) {
        parts[idx + 1].select();
    }
}

Answer 3

您可以通过以下内容调整输入长度检查来实现此目的：

foo.hpp

您可以检查当前输入的id是否是您的日期输入之一，并在输入长度为4的字符串后关注下一个输入。

Answer 4

您可以使用数据属性指定输入的长度，如下所示：

<input placeholder="YYYY" data-length="4">

然后更新javascript以检查此属性，如果未找到，则使用2作为默认值。

if ((val = $_el.val()).length == ($_el.data('length') || 2)) {}

日期验证 - 输入一定数量的字符后，转到下一个输入字段

4 个答案: