jQuery - 无法检索输入数字值[重复]答案

【问题标题】：jQuery - Cannot retrieve Input Number value [duplicate]jQuery - 无法检索输入数字值[重复]
【发布时间】：2013-05-17 09:01:47
【问题描述】：

<input id='nb' name="nb" type="number" placeholder="Number"/>

jQuery.val() 如果只有数字则返回值，如果有字母则为空。

Chrome 会显示输入数字箭头（并且它们有效），但我也可以输入字母......奇怪的事情

顺便说一句，在 mozilla 和 IE8 上它变成了一个正常的输入文本（我猜我有一个旧的 mozilla）

有什么想法吗？在 jQuery doc 上找不到任何特定于带有 .val() 的数字输入的内容

【问题讨论】：

出于好奇，this.value 提供了什么（代替$(this).val()）？
最简单的方法是忽略 HTML5，使用 <input type="text"... 并设置 .onkeyup 函数只接受数字（例如正则表达式），因为 HTML5 不是真的得到了所有人的支持。
将类型更改为文本，无论您输入什么，您都会得到数字和字母
相似，但不重复。在这里，OP 使用的是 HTML5。如果他按照我在之前评论中的建议工作并且他的真正问题是从输入中获取价值，则会重复。
如果 Chrome 也允许输入随机字母，我认为这是一个错误 - w3.org/TR/html5/forms.html#number-state-(type=number) 说，“用户代理不得允许用户将值设置为非空不是有效浮点数的字符串。”

标签： javascript jquery html input

【解决方案1】：

建议使用input type="text" 而不是HTML5 输入input type="number"：

//HTML

<input id="inp" type="text" />

//JAVASCRIPT (JQUERY NEEDED)

function onlyNumbers(evt) {
    // SOME OPTIONS LIKE ENTER, BACKSPACE, HOME, END, ARROWS, ETC.
    var arrayExceptions = [8, 13, 16, 17, 18, 20, 27, 35, 36, 37,
        38, 39, 40, 45, 46, 144];
    if ((evt.keyCode < 48 || evt.keyCode > 57) &&
            (evt.keyCode < 96 || evt.keyCode > 106) && // NUMPAD
            $.inArray(evt.keyCode, arrayExceptions) === -1) {
        return false;
    }
}

$('#inp').on('keydown', onlyNumbers);

//JAVASCRIPT (WITHOUT JQUERY)

function inArray(value, arr) {
    for(var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
            return i;
        }
    }
    return -1;
}

function onlyNumbers(evt) {
    // SOME OPTIONS LIKE ENTER, BACKSPACE, HOME, END, ARROWS, ETC.
    var arrayExceptions = [8, 13, 16, 17, 18, 20, 27, 35, 36, 37,
        38, 39, 40, 45, 46, 144];
    if ((evt.keyCode < 48 || evt.keyCode > 57) &&
            (evt.keyCode < 96 || evt.keyCode > 106) && // NUMPAD
              inArray(evt.keyCode, arrayExceptions) === -1) {
        return false;
    }
}

document.getElementById('inp').onkeydown = onlyNumbers;

正如我在评论中所说，在 HTML5 成为我们可以正常使用的标准网络语言之前，我更喜欢使用它。

Demo 使用 jQuery
Demo 没有 jQuery

【讨论】：

【解决方案2】：

如果您只想从输入中获取数字，那么您需要使用正则表达式。最初使用 $(your_element).val() 从输入中获取值，然后使用正则表达式。

Here 是一个运行示例。希望对您有所帮助。

【讨论】：

这不是我的问题，我已经在使用这种解决方案来启用跨浏览器支持。我希望在支持 HTML5 的浏览器上不需要这样做，但显然即使 chrome 也不总是支持“数字”输入。仅供参考，我使用的是jsfiddle.net/gJQCf