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/

Answer 2

工作演示 http://jsfiddle.net/Pb2eR/23/ 已更新复制/粘贴演示：http://jsfiddle.net/Pb2eR/47/（在此演示中，您将使用字符复制粘贴字符串，但不会允许，否则它将允许复制粘贴数字：在safari中测试）

演示箭头键工作 http://jsfiddle.net/gpAUf/

这会对你有帮助。

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

良好链接：[1] How to allow only numeric (0-9) in HTML inputbox using jQuery?

<强>码

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

<强> HTML

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

复制粘贴更新内容

$(".hulk").keyup(function(){

    this.value = this.value.replace(/[^0-9\.]/g,'');

});

$(".hulk").bind('input propertychange', function() {

     this.value = this.value.replace(/[^0-9\.]/g,'');
});

来自其他演示的

代码

$(".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,'');
});

Answer 3

这将允许两个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('');
        }
    });
});

哪种方法可以过滤文本字段的数值？

3 个答案: