Javascript key board input filtering

Question

Does anyone have a working dynamic javascript input filter that limits text inputs across multiple browsers?

I've seen multiple examples online, but most of them seem to have flaws or lack multibrowser support.

My current attempt is posted below, but it's failing for shifted numbers under firefox, and I haven't tried other browsers yet.

As http://www.quirksmode.org/js/keys.html shows, it's not an easy problem.

Does anyone have a better solution?

var numb = /[0-9]/;
var lwr = /[a-z]/;
var upr = /[A-Z]/;
var alpha = /a-zA-Z]/; //not checked
var alphaNum = /a-zA-Z0-9/; //not checked

function onKeyPressAcceptValues(e, reg){
    var key = window.event ? e.keyCode : e.which;
    //permit backspace, tab, delete, arrow buttons, (key == 0 for arrow keys)

    alert(key);
    if(key == 8 || key == 9 || key == 46 ||(key>32 && key <41 ||key == 0)){
        return true;
    }
    var keychar = String.fromCharCode(key);
    return reg.test(keychar);
}

function isNumberKey(parm) {return onKeyPressAcceptValues(parm,numb);}
function isLowerKey(parm) {return onKeyPressAcceptValues(parm,lwr);}
function isUpperKey(parm) {return onKeyPressAcceptValues(parm,upr);}
function isAlphaKey(parm) {return onKeyPressAcceptValues(parm,alpha);}
function isAlphanumKey(parm) {return onKeyPressAcceptValues(parm,alphaNum);}

It would be used via

<input type="text" name="pw[first_name]" size="15" maxlength="15" onkeypress="return isAlphaKey(event)">

I should also mention that it is inconsistently permitting other keys to go through, such as the shifted number keys. We probably need a replacement rather than an improvement. — lief79, Jun 17 '09 at 21:00

score 2 · Answer 1 · answered Jun 17 '09 at 21:11

2

Trapping keyboard events won't do the trick anyways because the user can always use Edit | Paste. Even if you do come up with a cross-browser solution to handle that, the user can always bypass everything by disabling Javascript.

In other words, don't waste your time. Just give the user an error when they attempt to submit invalid data.

answered Jun 17 '09 at 21:11

Josh Stodola

81,538
47
180
227

There can be value in having a quicker local response and moving some overhead away from , but sanity checking the completed fields via regex's is an easier approach. For this application, I needed the data checking for a javascript function as well as server-side. Unfortunately, this means duplicate checks. It could have been done via AJAX, and used the same call as sanity checking in the final post. This seems to be the best approach now. – lief79 Jun 18 '09 at 16:19
I understand the value in having a sanity check on the client-side, but that does not mean you need to do it on every keystroke. When they submit the form, perform your validation and don't let submission continue if you find an error. Painless! – Josh Stodola Jun 18 '09 at 19:39

score 2 · Answer 2 · answered Jul 30 '09 at 14:42

Would checking and removing invalid values after input work?

Checking the charCode and keyCode can get to be quite difficult across browser why not check the value that is actually added to the text field?

Invert your regular expressions and they match everything you don't want. Once you have that just use your inverted regular expression to replace data inserted into your input boxes that you don't want.

A quick example I created at http://jsbin.com/ulibu has a text box that ONLY accepts integers. It has a small javascript block which strips non-digits from the field:

function checktext( e ) {
  //Remove digits
  //Yes, the global search/replace is important. If we don't use a global
  //replace ctrl+v will remove only the first invalid character instead of
  //them.
  e.value = e.value.replace( /[^\d]/g , '' );
}

And the input box is declared with a keyup event to catch anything typed:

<input type="text" id="text" onkeyup="checktext(this);"/>

This sure isn't perfect. Things you'll still need to do:

Validate server side. Client side validation will never catch all your users mistakes. Always validate server side anyway.
Perfect the checks. This is a simple regexp, some could end up being more complex
Catch paste events so mouse paste events are converted in the same manner.
Display some warning to the user that "only X are allowed" if you have to remove text. Otherwise they might just think that "the browser is acting funny".

score -1 · Answer 3 · answered Jun 17 '09 at 21:30

-1

Here's one way to do it:

Create a "pseudo field" - this is where the input will appear to the user
When clicked, set the focus to a hidden field
Have the user type into the hidden field
Look at what's being typed and copy the valid characters to the pseudo-field

The user thinks they're typing into the field, but they're not.

answered Jun 17 '09 at 21:30

Diodeus - James MacFarlane

112,730
33
157
176

Interesting, do you know of any public samples of this approach? – lief79 Jun 18 '09 at 16:20

Javascript key board input filtering

3 Answers3

Linked