2
\$\begingroup\$

Is there any simple way to detect user keystrokes that result in character input? In other words, ignore all soft keys and modifier keys? This works but seems sort of hacky:

var keycode = event.keyCode ? event.keyCode : event.charCode
if((keycode>=48 && keycode<=90) || (keycode>=96 && keycode<=111) || (keycode>=186 && keycode<=192) || (keycode>=219 && keycode<=222)){
    alert("realkey")
}
\$\endgroup\$
4
  • 1
    \$\begingroup\$ Perhaps if you described what you were trying to achieve we could help more. Is this typing in a text input? Can you use the keyup event and see if the .value has changed as a result? \$\endgroup\$
    – Phrogz
    Feb 17, 2012 at 17:17
  • \$\begingroup\$ What you're doing looks like the best way to go. If you want something that doesn't look "hacky" you'll need a library like jQuery (which under the hood is hacky). \$\endgroup\$
    – qwertymk
    Feb 17, 2012 at 17:19
  • \$\begingroup\$ Sorry no its a contentEditable div. I'd hoped there was some easy way to check this range of keys but from the sounds of the comments there isn't.... \$\endgroup\$
    – cronoklee
    Feb 17, 2012 at 17:22
  • \$\begingroup\$ I think you're using the best method. \$\endgroup\$
    – Jivings
    Feb 17, 2012 at 17:31

2 Answers 2

4
\$\begingroup\$

Yes, use keypress events instead of keydown events. See example: http://jsfiddle.net/7fmjh/6/ - or a non-jquery example: http://jsfiddle.net/7fmjh/11/

\$\endgroup\$
5
  • \$\begingroup\$ This is a cool solution. I can't fathom how to do it on contentEditable div tho? \$\endgroup\$
    – cronoklee
    Feb 17, 2012 at 18:30
  • \$\begingroup\$ Works just the same: jsfiddle.net/7fmjh/13 \$\endgroup\$
    – Will Stern
    Feb 17, 2012 at 18:37
  • \$\begingroup\$ What I mean is if its contenteditable then we'll need to append the keypress at the caret position rather than at the end of the div. I'm not actually using jQuery but the examples are great. thanks a lot \$\endgroup\$
    – cronoklee
    Feb 17, 2012 at 19:30
  • \$\begingroup\$ so...what exactly are you trying to do for YOUR page that you still can't do? I'm assuming you don't want to append the word "keypress" every time they keypress haha. \$\endgroup\$
    – Will Stern
    Feb 17, 2012 at 21:04
  • 1
    \$\begingroup\$ This will not work in FireFox \$\endgroup\$
    – Jonathan
    Mar 23, 2015 at 10:31
0
\$\begingroup\$

You can use String.fromCharCode in combination with a Regular Expression test as alernative:

var cando =  /[a-z0-9]/i
              .test(String.fromCharCode(event.keyCode || event.charCode));
if( cando ){
    alert("realkey")
}

In the RegExp you can put all the characters you want to allow, in this case all a to z (case insensitive) and the digits 0 to 9. Best to use the keypress event here.

BTW, what kind of criterium is 'seeming sort of hacky'?

\$\endgroup\$
3
  • \$\begingroup\$ What about unicode? \$\endgroup\$ Oct 28, 2017 at 0:32
  • \$\begingroup\$ "In the RegExp you can put all the characters you want to allow" ... So, put them between / ... /i \$\endgroup\$
    – KooiInc
    Oct 28, 2017 at 7:48
  • \$\begingroup\$ typo: String.fromCharCode \$\endgroup\$
    – tokland
    Oct 24, 2018 at 10:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.