discriminately capturing onkeypress events

jbigham · Mar 28, 2006

Hello,

I'd like to capture key events using javascript, but don't want to
process such events when the user is typing into an input box or into a
textarea. As an example, gmail has a feature where you can type "r"
anywhere on the page while viewing a message and it will open a reply
box, but if you type an "r" while entering text into a form, it doesn't
do this.

My question is how to do this most efficiently.

Should I capture all events of interest and then determine whether to
act based on the object that has focus?

Should I define many onkeypress events for each of the objects on the
page that aren't text boxes?

Should I define the onkeypress at page level but return null for
onkeypress from each of the text boxes on the page?

What do you think?

Thanks!
Jeff

Csaba Gabor · Mar 28, 2006

Hello,

I'd like to capture key events using javascript, but don't want to
process such events when the user is typing into an input box or into a
textarea. As an example, gmail has a feature where you can type "r"
anywhere on the page while viewing a message and it will open a reply
box, but if you type an "r" while entering text into a form, it doesn't
do this.

My question is how to do this most efficiently. ....
Should I define the onkeypress at page level but return null for
onkeypress from each of the text boxes on the page?

I would capture the 'keydown' event (there is also keyup and keypress),
and use the event object to see what the original target was. If it
was a textbox or textarea (which you can check using .tagName and
..type), then return immediately. Otherwise do your thing and
subsequently perhaps cancel the event from bubbling / continuing.

Csaba Gabor from Vienna

Jim · Mar 29, 2006

Jeff,
This should do the trick: type 'r' in the form input and text areas and
nothing will happen; type it anywhere in the body and the paragraph
text will change. this should work in both msie and firefox; also, I
found that onKeyup seems to be more browser compatible.
-------------------------------------------------------------
<script type='text/javascript' >
function showStuff(evt){
var node = (evt.target) ? evt.target : ((evt.srcElement)
?evt.srcElement : null );
evt = (evt) ? evt : ((event) ? event : null);
var keynumber = evt.keyCode;
if(keynumber == 82){
if((node.tagName =="INPUT")||(node.tagName =="TEXTAREA")){
//do nothing;
}else{
document.getElementById("para").innerHTML = "you pressed the R key";
}
}
}
</script>
</head>
<body onkeyup = "showStuff(event)" onClick="showStuff(event)">
<form>
<input type="text" id="entry" size = "60" ><br>
<textarea rows="7" cols="57"></textarea></p>
</form>
<p id="para">some paragraph text</p>
</body>

Catching "onKeyPress" events	2	Sep 16, 2006
Onkeypress event is not working correctly.... ?	1	Apr 6, 2008
table onkeypress caught in IE. not in FF!!	0	Jul 18, 2007
Backticks and class elemnt comby not working	1	Sep 2, 2024
input (text) onkeypress with Japanese characters	3	Sep 8, 2005
Filename undefined for Blob ?	1	Oct 28, 2023
MAC onkeypress problem	1	Mar 13, 2006
Issue with textbox script?	0	Sep 5, 2022

discriminately capturing onkeypress events

jbigham

Csaba Gabor

Jim

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads