CODEWITHSUNDEEP
javascriptjquerykeydown
undefined
undefined

Reputation: 25

jQuery - Disable keydown in input and textareas

I am using the arrow keys (and A,W,D) to navigate between pages.

How can I disable the keydown function for textareas and inputfields?

   $(document).keydown(function(e) {
    switch(e.which) {
        case 65:
            leftArrowPressed();
            break;
        case 37:
            leftArrowPressed();
            break;
        case 68:
            rightArrowPressed();
            break;
        case 39:
            rightArrowPressed();
            break;
        case 72:
            homePressed();
            break;
        case 87:
            homePressed();
            break;
    }
});

Upvotes: 0

Views: 1693

Answers (3)

myfunkyside
myfunkyside

Reputation: 3950

Since you're using jQuery:

$("input, textarea").on("keydown keyup",function(e){e.stopPropagation();});

...is all you need  (rest of code in snippet is unimportant, just for proof-of-concept)

$("input, textarea").on("keydown keyup",function(e){e.stopPropagation();});
$(document).keydown(function(e){console.log("key pressed: "+e.which);});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="Test input" />&nbsp;<textarea style="height:18px;">Test textarea</textarea>&nbsp;<div style="display:inline; border: 1px solid black;">Test div</div>
<div>1. Just click somewhere in the results area and start typing. Watch the console.<br />2. Then click inside the input/textarea and do the same. Nothing will happen.</div>

Upvotes: 0

trincot
trincot

Reputation: 350147

You could use this (needs Internet Explorer 9+):

function leftArrowPressed() { console.log('left pressed'); }
function rightArrowPressed() { console.log('right pressed'); }
function homePressed() { console.log('home pressed'); }

$(document).keydown(function(e) {
    var el = document.activeElement;
    try {
        if (el && el.selectionStart !== undefined || el.isContentEditable) {
            console.log('skip');
            return; // active element has caret, do not proceed
        }
    } catch (ex) {}
    var f = {
        65: leftArrowPressed,
        37: leftArrowPressed,
        68: rightArrowPressed,
        39: rightArrowPressed,
        72: homePressed,
        87: homePressed
    };
    if (f[e.which]) f[e.which]();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="test">
<input type="checkbox">
<textarea>test
</textarea>
<div contenteditable>test</div>

Upvotes: 1

MojtabaNava
MojtabaNava

Reputation: 1

$(document).keydown(function (e) {
            var element = e.target.nodeName.toLowerCase();
            if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly") || (e.target.getAttribute("type") ==="checkbox")) {
                if (e.keyCode === 8) {
                    return false;
                }
            }

});

Upvotes: 0

Related Questions