javascript - 过滤文本字段数值的正确方法是什么？

Question

我正在处理一个文本字段，该文本字段使用的验证类型不允许您输入数字以外的值。因此，我的初始代码看起来非常简单，类似于:

$(textField).onKeyPress(function(e) {
    if (e.which < 48 && e.which > 57)
        e.preventDefault();
});

这相当简单，但事实证明(在所有浏览器的最新版本中)Firefox 也会阻止使用箭头键和删除/退格键移动，而其他浏览器则不会。

环顾四周，我发现我还需要检查这些键，并检查在 e 事件引用中公开的不同属性。

我的最终代码看起来像这样:

$(textField).onKeyPress(function(e) {
    var code = e.which || e.keyCode;
    if (code > 31  // is not a control key
        && (code < 37 || code > 40) // is not an arrow key
        && (code < 48 || code > 57) // is not numeric
        && (code != 46) // is not the delete key
    )
        e.preventDefault();
});

但是，这感觉对于解决一个相当简单的问题(仅仅防止非数字)来说太过分了。

我做错了什么？就此类验证而言，哪种最佳做法是？

Answer 1

我们将响应按键和模糊事件。当有人按下一个键时，我们检查输入的键是否是一个数字。如果是，我们允许。否则，我们会阻止它。

如果该字段是模糊的，我们会删除任何非数字值，以及后面的所有这些值。这将防止用户粘贴非数字字符串:

$("#textfield").on("keypress blur", function(e){
    if ( e.type === "keypress" )
        return !!String.fromCharCode(e.which).match(/^\d$/);
    this.value = this.value.replace(/[^\d].+/, "");
});

演示:http://jsfiddle.net/jonathansampson/S7VhV/5/