Question

我需要输入才接受数字。我有：

<input type="number" pattern="[0-9]*" />

如果我开始输入字母，输入将在失去焦点时被清空，但如果我键入＆＃34; 2blah＆＃34;它不会被清空。有什么提示吗？

Answer 1

正则表达式中的*字符通常表示除了行尾之外的任何值。现在，你设置模式的方式，只要第一个值是一个数字（[0-9]），它就会接受任何字符串。之后，它允许任何值，包括字母，数字和空格。要解决此问题，请将您的html更改为：

<input type="number" pattern="[0-9]+" />

要仅接受数字，您需要将*更改为+。 +字符表示前一个值可以在0 - 无穷大时间之间重复。这样，它只接受数字0-9，并且可以有用户想要输入的数字。

注意：如果要收集十进制数，请将.添加到正则表达式模式中：

pattern="[0-9.]+"

Answer 2

仅允许[0-9]数字，小键盘数字，箭头，BackSpace，Tab，Del和Ctrl + C，Ctrl + V，Ctrl + A一样。只允许一个点。如果模糊事件中最后一个字符为点，则将其删除。

element.on('keydown', function(e) {
    var arrowsKeyCodes = [37, 38, 39, 40];
    var numPadNumberKeyCodes = [96, 97, 98, 99, 100, 101, 102, 103, 104, 105];
    var dots = [110, 190];
    var tabBackDel = [8, 9, 46];
    var acv = [65, 67, 86];

    // Allow only one dot.
    if (e.target.value.indexOf('.') !== -1 && dots.indexOf(e.keyCode) !== -1) {
        event.preventDefault();
    }

    // allow only [0-9] number, numpad number, arrow,  BackSpace, Tab, Del
    // Ctrl + C, Ctrl + V, Ctrl + A
    if (
        (e.keyCode < 48 &&
            arrowsKeyCodes.indexOf(e.keyCode) === -1 || e.keyCode > 57 &&
            numPadNumberKeyCodes.indexOf(e.keyCode) === -1 &&
            dots.indexOf(e.keyCode) === -1
        ) &&
        tabBackDel.indexOf(e.keyCode) === -1 &&
        (e.ctrlKey === false || e.ctrlKey === true && acv.indexOf(e.keyCode) === -1)
    ) {
        e.preventDefault();
    }
});

element.on('blur', function(e) {
    var value = e.target.value;
    if (value.substring(value.length - 1) === '.')
        e.target.value = value.substring(0, value.length - 1)
});

ie11：仅输入数字

2 个答案: