Cannot clear textbox after keypress event

Question

I know this questions is all over the place, but this is driving me crazy!!!

Here is my code:

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

}     
}

I am trying to clear the value of the textbox with the given id. The code above clears the text, but when a new key is pressed, the value of that key is shown (uppercase letters). I have tried the change(), keyup(), keydown() functions but they still do not seem to clear the textbox of the last value entered.

Any help will be appreciated. Thank you!

I kind of figured the problem lies in when the different functions get called (keypress, keydown, keyup, etc). But, which is the one I have to look for? — Jose, Mar 18 '13 at 21:45

magritte · Accepted Answer · 2013-03-18T22:15:05.027

You just need to add an event.preventDefault();

You might also want to place your function inside the closure so it isn't global, and you don't need to re-find the html element again inside the method:

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

For kicks I also made your code into a jQuery plugin that you can easily apply to any element (it doesn't delete the value just stops the keypress):

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

Apply like this:

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

That is beautiful!!! Solved it instantly!!! So this prevents the event from occurring, in this case, the keypress? Thank you! Just need to change "event" to "e". — Jose, Mar 18 '13 at 21:51
@Jose good spot, I've updated and added a couple of other tips for you :-) — magritte, Mar 18 '13 at 22:00
Thanks. I will label this as the answer, although for my purposes @Vlad offers a valid argument and go with his, but this is certainly the solution for the general question I posted! Thank you. — Jose, Mar 18 '13 at 22:02
You're welcome, check out the plugin I added too - they're handy if you want to reuse the same logic: http://docs.jquery.com/Plugins/Authoring — magritte, Mar 18 '13 at 22:17

score 1 · Answer 2 · answered Mar 18 '13 at 21:46

You just have to cancel the event with e.preventDefault();:

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

score 1 · Answer 3 · edited May 23 '17 at 10:32

1

I would not clear the textbox in your case; if user types long text in lower case, then hits CapsLock and then continues typing - the whole input will be deleted.

As for the function, you can either call event's preventDefault() method or return false (you can read here on the differences between the methods):

    $(document).ready(function () {

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

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

edited May 23 '17 at 10:32

Community

1
1

answered Mar 18 '13 at 21:52

Vlad

2,475
21
32

You bring about a very interesting point. And your way of solving seems more elegant in that manner. – Jose Mar 18 '13 at 21:54
Thanks man :) I labeled a different post as the answer but will go with yours since you bring up an extremely valid argument and this takes care of the problem beautifully! – Jose Mar 18 '13 at 22:03

Cannot clear textbox after keypress event

3 Answers3