jquery - jQuery按键事件不适用于警报

Question

我有这个代码，当长度为 0 时，不允许用户输入除 az AZ 0-9 之外的任何内容。我想提醒用户他不允许输入特殊字符。问题是当我点击空格时，警报会在几分之一秒内出现和消失。我的代码有什么问题？

    $('#value').bind('keypress', function(e) {
        if($('#value').val().length == 0){
            if (e.which == 32){//space bar
                e.preventDefault();
            }
            if (e.which < 48 || 
                    (e.which > 57 && e.which < 65) || 
                    (e.which > 90 && e.which < 97) ||
                    e.which > 122) {
                    e.preventDefault();
                        alert("Not allowed");
            }
        }
    });   

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

演示在这里

Answer 1

这是你的代码，没关系

$('#value').on('keypress', function(e) {
    if (e.which == 32){//space bar
        e.preventDefault();
    }
    var valid = (e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122);
    if (!valid) {
        e.preventDefault();
        alert("Not allowed");
    }
});

我删除了这个测试

if($('#value').val().length == 0)

Answer 2

几点建议：

1. 使用 on 方法而不是 bind 方法
2. 当您在方法回调中时，您可以使用“this”关键字引用元素

除了这里的建议是代码和小提琴。

$('#value').on('keypress', function(e) {
            if($(this).val().length == 0){
                if (e.which == 32){//space bar
                    e.preventDefault();
                    alert("just some text");
                }
                var valid = (e.which >= 48 && e.which <= 57) || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122);
if (!valid) {
    e.preventDefault();
}
            }
        }); 

http://jsfiddle.net/fwcfq/45/

Answer 3

根据对问题和答案的评论，您可能需要考虑一种向用户显示警报的不同方式。您可以使用 jQuery 在页面上显示/隐藏提醒用户的元素。例如：

HTML

<input type="text" id="value" />
<p id="alert" style="display:none">Not allowed!</p>

JavaScript

$('#value').bind('keypress', function (e) {
    var showAlert = false;
    if ($('#value').val().length == 0) {
        if (e.which == 32) { //space bar
            e.preventDefault();
            showAlert = true;
        }
        var valid = (e.which >= 48 && e.which <= 57)
                    || (e.which >= 65 && e.which <= 90)
                    || (e.which >= 97 && e.which <= 122);
        if (!valid) {
            e.preventDefault();
            showAlert = true;
        }
    }
    if (showAlert) {
        $('#alert').show();
    } else {
        $('#alert').hide();
    }
});

你可以在这里看到一个演示：http: //jsfiddle.net/fwcfq/47/