javascript - 按键事件后无法清除文本框

Question

我知道到处都是这样的问题，但这让我发疯!!!

这是我的代码:

$(document).ready(function () {

        $('#MainContent_LoginUser_Password').keypress(function (e) {

            noCapsLock($('#MainContent_LoginUser_Password'), e, "Please turn off Caps Lock");
        });

    });
function noCapsLock(o, e, str) {
var s = String.fromCharCode(e.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
    alert(str);
    o.val('');

}     
}

我正在尝试清除具有给定 ID 的文本框的值。上面的代码清除文本，但是当按下新键时，会显示该键的值(大写字母)。我已经尝试了 change()、keyup()、keydown() 函数，但它们似乎仍然没有清除最后输入的值的文本框。

任何帮助将不胜感激。谢谢!

Answer 1

你只需要添加一个event.preventDefault();

您可能还想将您的函数放在闭包中，这样它就不是全局的，并且您不需要在方法中再次重新找到 html 元素:

$(document).ready(function () {

    var noCapsLock = function(o, e, str) {
        var s = String.fromCharCode(e.which);
        if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
            alert(str);
            o.val('');
            e.preventDefault();
        }     
    }    

    $('#MainContent_LoginUser_Password').keypress(function (e) {
        noCapsLock($(this), e, "Please turn off Caps Lock");
    });
});

为了好玩，我还将您的代码制作成一个 jQuery 插件，您可以轻松地将其应用于任何元素(它不会删除值，只是停止按键):

(function($) {
    $.fn.noCapsLock = function(message) {
        this.keypress(function (e) {
            var char = String.fromCharCode(e.which);
            if (char.toUpperCase() === char && char.toLowerCase() !== char && !e.shiftKey) {
                window.alert(message);
                e.preventDefault();
            }         
        });
    };
})(jQuery);

像这样应用:

$(document).ready(function () {
    $('#MainContent_LoginUser_Password').noCapsLock('Please turn off Caps Lock!');
});