4

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

$(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();
});

然而，这感觉对于解决一个相当简单的问题来说太过分了，因为只是防止了非数字。

我究竟做错了什么？就这种验证而言，哪个是最佳实践？

4

3 回答 3

4

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

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

$("#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/

于 2012-06-02T22:38:20.730 回答
2

工作演示 http://jsfiddle.net/Pb2eR/23/ 更新了复制/粘贴演示：http: //jsfiddle.net/Pb2eR/47/（在这个演示中，您可以复制粘贴字符串和不允许的字符将允许复制粘贴数字：在 safari 中测试）

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

这将对您有所帮助。

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

好的链接：[1]如何使用 jQuery 在 HTML 输入框中只允许数字（0-9）？

代码

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

​
于 2012-06-02T22:52:39.660 回答
-1

这将允许两个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('');
        }
    });
});
于 2012-06-02T23:00:33.633 回答