CODEWITHSUNDEEP
javascriptjquery
Eino Gourdin
Eino Gourdin

Reputation: 4507

Javascript - bind to keys events, except if user is in a text input

So I have this page, in which the user can use the directional keys to navigate between different items. For that, I use a jquery binder :

$(document.body).bind('keydown', function(event) {
// use the directional keys

I want this event work at every time, except if the user is focused in a text input.

So I tried to filter out the event like this:

$(document.body).bind('keydown', '*:not(input[type="text"], textarea)', function(event) {

but unfortunately the filter does not work, and the event fires in every case.

I could detect the focus (and blur) events on every input in my page, and deactivate the move event via a global boolean, however I find it quite inelegant.

Is there a way to either let the input fields "consume" the events, or to filter the event with a reverse selector like I tried to do ?

Thanks in advance,

Upvotes: 2

Views: 105

Answers (2)

Eino Gourdin
Eino Gourdin

Reputation: 4507

I couldn't make the selector on on() work, so I finally solved the problem by filtering on event.target after reception:

$(document.body).on('keydown', function(event) {
    if (!$(event.target).is('input[type="text"], textarea')){
    // handle keys...

(the solution was proposed by someone who deleted his answer, so I retrace it here)

Upvotes: 1

George
George

Reputation: 36784

That isn't valid .bind() syntax. Events passed to .bind() cannot be delegated.

You probably mean to use .on():

$(document.body).on('keydown', '*:not(input[type="text"], textarea)', function(event) {

});

JSFiddle

If you are using a jQuery version prior to .on() (which you shouldn't be..) you can use delegate():

$(document.body).delegate('*:not(input[type="text"], textarea)', 'keydown', function(event){

});

Upvotes: 2

Related Questions