How to deactivate keypress event at textarea

Question

I was writing an javascript application. I used something like

document.keypress = function(e) {
    switch(e.which){ 
    case 97: 
    alert('foobar');
    break;
    .......

And it works fine! Now, somewhere in the html page i have a textarea, Now, whenever i type a (i.e, ASCII 97) then it alert's (obviously).

The question is how do i prevent this? with my keypress event working for everything except inside textareas, and text fields?

Correct me if I am wrong - you want the alert to only show when you type "a" inside a textbox? — Raoul George, Aug 12 '13 at 08:18
no, he wants to show alert only when not typing into textarea, textfields... — Majky, Aug 12 '13 at 08:20
Use `e.preventDefault()` with in the `keypress` event of your textarea or textfield — zzlalani, Aug 12 '13 at 08:20
@RaoulGeorge : I want the alert to only show when i type "a" anywhere in the window, but when the textarea is focused, i don't want to show it! — cipher, Aug 12 '13 at 08:21

score 4 · Accepted Answer · answered Aug 12 '13 at 08:20

You can use the target attribute to identify the element that triggered the event. Then, use tagName to figure out the element type.

You can use other properties like type to figure out if it is a text field.

document.keypress = function(e) {
var target = e.target;
var elementType = target.tagName.toLowerCase();
if (elementType != "textarea" && !(elementType =="input" && target.type =="text")) {
    switch(e.which){ 
    case 97: 
    alert('foobar');
    break;
    .......

score 2 · Answer 2 · answered Aug 12 '13 at 08:21

You can specify element/elements to which you'll add event listeners, for example:

document.getElementById('text-field').keypress = function (e) {
    var code = e.keyCode || e.which;
    switch (code) {
        case 97:
            alert('foobar');
            break;
        ....
    } 
}

Raoul George · Answer 3 · 2013-08-12T08:34:34.220

1

I think what you are looking for is jQuery's stopPropagation method.

From the docs -

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$(':input').on('keypress', function(e) {
      e.stopPropagation();
});

Working fiddle

When you click inside the textbox, the alert will not be shown. When you click anywhere else in the document, the alert will be displayed.

edited Aug 12 '13 at 08:34

answered Aug 12 '13 at 08:28

Raoul George

2,807
1
21
25

It says he's using a textarea. heheh. `input` ? heheh – Kyle Emmanuel Aug 12 '13 at 08:30

score 1 · Answer 4 · edited May 23 '17 at 11:49

1

I can see two possible approaches:

Add onfocus/onblur handlers to your text inputs, to clear/set document.keypress.
Within the handler, get the currently focused element

How do I find out which DOM element has the focus?

And then use the .tagName and .type properties to determine whether it's a text input.

edited May 23 '17 at 11:49

Community

1
1

answered Aug 12 '13 at 08:33

Stewart

3,935
4
27
36

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

0

You can use jQuery's keyPress method.

http://api.jquery.com/keypress/

here's how to use it :

$("#target").keypress(function(e) {
  e.preventDefault();
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 12 '13 at 08:27

Kyle Emmanuel

2,193
1
15
22

score 0 · Answer 6 · answered Aug 12 '13 at 08:35

try following:

$(document).on("keypress",function(e){
    switch(e.which){ 
      case 97: 
       alert('foobar');
       break;
    }
});

$('textarea,input[type="text"]').on("keypress",function(e){
   e.stopPropagation();
});

here is the fiddle: http://jsfiddle.net/m7ghb/

I hope it helps.

How to deactivate keypress event at textarea

6 Answers6

http://api.jquery.com/keypress/