How to make onkeydown working on all document except one div

Question

I have HTML5 app in which I use shortcut keys. In this app I have also chat. When I write in chat window then shortcut keys also fire up. How can I exclude shortcut keys in chat window?

This is how I use onkeydown:

 <body onkeydown="Gui.doKey(arguments[0] || window.event)">

Gui:

var Gui = { 
    doKey: function (event) { 
        var key = event.keyCode || event.charCode; 
        switch (key) { 
            case 83: //s 
                skip(); 
                break; 
            default: 
                console.log(key); 
        }
    }
}

In `Gui.doKey`, check if `event.currentTarget == `. If so, abort. — Kiruse, Oct 22 '13 at 19:15
var Gui = { doKey: function (event) { var key = event.keyCode || event.charCode; switch (key) { case 83: //s skip(); break; default: console.log(key); } — Bartek Kosa, Oct 22 '13 at 19:15
@Derija93 I tried your suggestion but event.currentTarget is always body element — Bartek Kosa, Oct 22 '13 at 19:19
@BartekKosa try that with target instead of currentTarget. currentTarget maps to the element who owned the event listener. http://www.w3schools.com/jsref/event_target.asp — Jazzepi, Oct 22 '13 at 19:32

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

var Gui = { 
    doKey: function (event) { 
        if(event.target == <your_div>) 
             return;
        var key = event.keyCode || event.charCode; 
        switch (key) { 
            case 83: //s 
                skip(); 
                break; 
            default: 
                console.log(key); 
        }
    }
}

See Difference between e.target and e.currentTarget

edited May 23 '17 at 12:25

Community

1
1

answered Oct 22 '13 at 19:34

Jazzepi

5,259
11
55
81

Kim Hogeling · Answer 2 · 2013-10-22T19:50:29.500

Add a class to the markup to determine, that keydowns need to be ignored for it. Make your Gui.doKey method check the source element. If it matches, return before doing anything else.

HTML:

<div class="ignore_keydown chat_window">...</div>

JS:

var Gui = {
    doKey : function (keyboardEvent) {
        // If the class contains the ignore selector, return immediately
        if (keyboardEvent.srcElement.className.indexOf('ignore_keydown') === -1) {
            return false;
        }
        // Original code...
    }
}

score -1 · Answer 3 · answered Oct 22 '13 at 19:16

-1

Did you try the jquery :not() selector to exclude the div, the div I presume your chat is in? http://api.jquery.com/not-selector/

answered Oct 22 '13 at 19:16

Kobbe

316
1
13

jQuery hasn't been tagged in this question. – James Donnelly Oct 22 '13 at 19:17
@Kobbe can you give an example how to do this in this specific scenario? – Bartek Kosa Oct 22 '13 at 19:21

How to make onkeydown working on all document except one div

3 Answers3