Question

我正在尝试创建PIN输入，其中用户可能只使用4位数。

在我的代码中，我设法排除了A-Z和任何其他键，如花括号，冒号等，但我在排除特殊字符（shift + 0-9）时遇到了一些麻烦。

关于长度，我已成功将其设置为4，但如果达到4并且想要删除它，则不会超过3。

我的代码：

var pin = document.forms.RegForm.pin;

pin.onkeydown = function(key) {
    var
        allowedkeys = [],
        auxkeys = [8, 13, 17, 18, 46],
        specChars = "!@#$%^&*()",
        keypressed = String.fromCharCode(key.which);

    allowedkeys.push(auxkeys);
    for (var i = 37; i < 41; i++) allowedkeys.push(i);
    for (var i = 48; i < 58; i++) allowedkeys.push(i);
    for (var i = 96; i < 106; i++) allowedkeys.push(i);

    if (this.value.length <= 3) {
        if (specChars.indexOf(keypressed) !== -1 ||
                (key.which < 48 || key.which > 57) &&
                (key.which < 96 || key.which > 105)) key.preventDefault();
    }
    else {
        if (auxkeys.indexOf(key.which) === -1) return false;
    }
};

我知道在HTML中使用maxlength =“4”可以很容易地完成长度，但为了更好地了解JavaScript，我更喜欢“在JavaScript中”解决方案。

如果你提供一个类似问题的答案或链接，如果有的话，我将不胜感激。小提琴：https://jsfiddle.net/qn968nhm/1/

Answer 1

您可以确保他们只以这种方式输入数字（以便使JS尽可能简单）。

class MyClass
{
    public string Tick { get; set; }
    public string Exchange { get; set; }
    public double Price { get; set; }
    public double Volume { get; set; }
}

Answer 2

<强> @ A.J。回应更好:)我把这个留给了多样性。

您可能想要更改方法。让用户输入，然后从输入中获取值并验证它，而不是限制输入字符。如果无效，请将其返回上一步。

注意：可以改进以下脚本（删除全局变量等）。

var inputValue = document.getElementById('yourInput');

function validateValue() {
    var value = document.getElementById('yourInput').value;
    var reg = new RegExp('^[0-9]$');
    return reg.test(value);
}


document.getElementById('yourInput').onkeyup = function() {
     if (!validateValue) {
         document.getElementById('yourInput').value = inputValue;
     }
     else {
         inputValue = document.getElementById('yourInput').value;
     }
};

Answer 3

（代表OP发布）。

答案：

pin.onkeypress = function (e) {
    if (this.value.length <= 3) {
        // Return only numbers
        return e.which >= 48 && e.which <= 57; // @a.j.'s answer
    }
    else {
        // If length is 4 disable input
        return false;
    }
};

如何在纯JavaScript中创建严格的4位数PIN输入？

3 个答案: