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

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

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

然而，这对于解决一个相当简单的问题来说太难了，因为它仅仅是防止非数值的

---

我做错了什么？在这种验证方面，哪一种是最佳实践？

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

如果该字段模糊，我们将删除所有非数值以及随后的所有值。这将防止用户粘贴非数字字符串：

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

---

演示：

工作演示已更新复制/粘贴演示：（在本演示中，您将使用不允许的字符复制粘贴字符串，否则将允许复制粘贴数字：在safari中测试）

箭头键工作演示

这对你有帮助

注意：在此版本中，即使复制粘贴，也会将其设置为空输入框，在safari lion osx中测试：）

好链接：[1]

代码

$(".hulk").keyup(function(){    
    this.value = this.value.replace(/[^0-9\.]/g,'');    
});
​

html

<input type="text" class="hulk" value="" />
​

来自另一个演示的代码

$(".hulk").bind('input propertychange', function(event) {
         if( !(event.keyCode == 8    // backspace
        || event.keyCode == 46      // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
     this.value = this.value.replace(/[^0-9\.]/g,'');
});

​

$（“.hulk”）.bind（'InputPropertyChange'，函数（事件）{
如果（！（event.keyCode==8//backspace
||event.keyCode==46//删除
||（event.keyCode>=35&&event.keyCode=48&&event.keyCode=96&&event.keyCode这将允许两个int。
如果用户使用鼠标复制和粘贴，它也会删除文本

$(document).ready(function () {
    $('#textfield').bind('keyup blur', function (e) {
        if (e.type == 'keyup') {
            if (parseInt($(this).val()) != $(this).val()) {
                $(this).val($(this).val().slice(0, $(this).val().length - 1));
            }
        } else if (e.type == 'blur') {
            $(this).val('');
        }
    });
});

谢谢！这看起来不是很“神经质”吗给用户？完全正确。不要干扰阻止事件，只需事后调整结果。@Alpha你是对的。我采取了上面的另一种方法，并且正在为那些复制/粘贴数字的人制定解决方案。在我键入
123
然后用鼠标复制并粘贴
a99
后，我最终得到了
12399
很高兴有
123
代替。但总的来说，这是一个很好的方法。@RayCheng感谢您的出色输入。我已经更新了解决方案，以涵盖键输入和粘贴。您是否介意用户将非数字文本复制并粘贴到输入框中？十进制和负数如何？您允许这些吗？@RayCheng说得好。这样做会非常好也要注意这些情况，因此我看到了提供的键控解决方案的价值。我惊讶地发现，没有人使用按键方法——这对我来说似乎更自然。可以从这种方法中去掉小数和负数，我允许的字符范围是纯数字（0-9）。如果使用
keypress
或
keydown
可能会有副作用，因为如果用户一直按住该键，事件会重复，代码会被调用多次。
keydup
只执行一次。@RayCheng请参见下面的更新：您可以使用simple
propertychange
来处理它：）希望对你们两个都有帮助鼠标复制粘贴怎么样？我在FF12和IE9上。当我用鼠标复制粘贴时，你们的代码不会被执行。另外，用户输入
-1.2.3.4
怎么样？@RayCheng酷毙了你们，看到我上面的更新，你们可以用
propertyChnage
@Tats\u简单的方法来完成。谢谢。这是一个非常好的方法oach和看起来不紧张（特别是复制/粘贴）。不过，它还有其他的怪癖。例如，至少在Chrome中，它不允许你使用箭头键在字段中移动。正如你所看到的，小怪癖让它变得越来越复杂，这就是为什么我问要采取“正确”的方法。哦，还有。我对这个类感到眼花缭乱“绿巨人”，和惊奇漫画角色有关吗？
$(".hulk").bind('input propertychange', function(event) {
         if( !(event.keyCode == 8    // backspace
        || event.keyCode == 46      // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
     this.value = this.value.replace(/[^0-9\.]/g,'');
});

​

$(document).ready(function () {
    $('#textfield').bind('keyup blur', function (e) {
        if (e.type == 'keyup') {
            if (parseInt($(this).val()) != $(this).val()) {
                $(this).val($(this).val().slice(0, $(this).val().length - 1));
            }
        } else if (e.type == 'blur') {
            $(this).val('');
        }
    });
});