CODEWITHSUNDEEP
javascriptjqueryvalidationfirefox
Tom Rudge
Tom Rudge

Reputation: 3272

Firefox - keypress bug. Can't use backspace with only letter input script

I've an input box that I only want to allow letters, hyphen, space and backspace. All is good on chrome but on Firefox backspace (or charcode 8) does not work. - https://jsfiddle.net/npo7y7fr/

$(document).ready(function () {            
$('.textInput').keypress(function (key) {
                if ((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;
            });
});

I've tried adding && (key.charCode != 8) also changes keypress to others like 'keydown, keyup' etc...

Can anybody get this working in Firefox (40.0.3) or something that I can use instead?

Upvotes: 2

Views: 6562

Answers (3)

Andrew
Andrew

Reputation: 7880

Instead of hardcoding some special keys, just skip the filtering for all of them. With the accepted solution, you still cancel arrow keys, Home, End, etc., which is a bad thing for the user.

As all special keys have a key field longer than 1 character, you can safely do this:

$(document).ready(function () {            
    $('.textInput').keypress(function (event) {
        return event.key.length > 1 || event.ctrlKey || !!event.key.match(/[a-zA-Z \-]/);
    });
});

The pressed key is accepted if it's a special key, it's been pressed simultaneously with the Ctrl key (to allow copying and pasting) or if it matches the regular expression (letters, space and hyphen).

As the user can paste invalid content, you should still remove illegal characters with the oninput event (probably something like ctrl.value.replace(/[^a-zA-Z \-]+/g, '')).

Upvotes: 2

Ripun
Ripun

Reputation: 210

Since Space will send keycode 32 and backspace will send 0 in Mozilla so that's why it is not working in mozilla.

change your script as below

$(document).ready(function () {            
$('.textInput').keypress(function (key) {
                if ((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45) && (key.charCode != 32) && (key.charCode != 0)  ) return false;
            });
});

hope this helps..!!

Upvotes: 4

Ricky S
Ricky S

Reputation: 371

Rather than trying to control what the browser can enter into the input, it might be easier to just filter the contents of the textbox on keyup.

Consider the following:

$('.textInput').keyup(function() {
    $(this).val( $(this).val().replace(/[^a-zA-Z]/,''));
});

Hope this helps.

Upvotes: 1

Related Questions