CODEWITHSUNDEEP
javascriptjquerykeyboardkey-bindings
Stephen Ostermiller
Stephen Ostermiller

Reputation: 25535

Binding arrow keys in jQuery except in input and textarea

I found this excellent question about binding the arrow keys with jQuery: Binding arrow keys in JS/jQuery with a great solution from Sygmoral:

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

EXCEPT: This prevents the arrow keys from working the way they would usually work when the focus is in a text input field.

How would I modify this solution to allow the arrow keys to function normally when the current focus is in an input, text area, or another content editable area?

Upvotes: 1

Views: 1335

Answers (3)

Jai
Jai

Reputation: 74738

Put this in a condition: 

$(document).keydown(function(e) {
    if(!$(e.target).is(':input, [contenteditable]')){
        switch(e.which){
           // the cases as is
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    }
});

Upvotes: 8

Happy Coding
Happy Coding

Reputation: 2525

Your editable element may have some common class

$('.input').keypress(function(event) {

    var charCode = (evt.which) ? evt.which : event.keyCode

    switch(charCode) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault();  
});

Upvotes: -2

Arun Ghosh
Arun Ghosh

Reputation: 7754

You can use event.target to get the target element of event, so you can check

var $target = $(e.target);
if($target.is("input") || $target.is("textarea")) {
    //
}

Upvotes: 0

Related Questions