How can you tell jQuery to detect arrow key IF it's not in a text/input box

I want to trigger some events with the arrow keys IF the cursor isn't in a textbox how can I check with jquery if the cursor is in a textbox?

This is what I have right now

    if (e.which == 37) 

This is the way I did it:

$(document).on("keydown", function(e){
    var isInput = false;
    var activeElement = document.activeElement; // this will get the currently focused dom node
        case "input":
        case "textarea":
        case "select":
            isInput = true;
        // execute your code here

If you need support for contenteditable elements, you can change your if statement to this:

if(!isInput && !activeElement.hasAttribute("contenteditable")){
    // your code

EDIT: To improve readability and remove the switch statement, you can also do something like this instead (although this will only work on relatively modern browsers; Edge 14+).

$(document).on("keydown", function(e){
    var active = document.activeElement;
    if(!["input", "textarea", "select"].includes(active.tagName.toLowerCase())){
        // execute your code here

Binding arrow keys in JS/jQuery, In this post, we are going to see how to detect if arrow key pressed from the keyboard using JavaScript Disable right click, copy, cut on web page using jQuery. You should use .keydown() because .keypress() will ignore "Arrows", for catching the key type use e.which. Press the result screen to focus (bottom right on fiddle screen) and then press arrow keys to see it work. Notes:.keypress() will never be fired with Shift, Esc, and Delete but .keydown() will.

Give the textboxes (I'm assuming <input type="text">) a class, such as myClass. So now you've got:

<input type="text" class="myClass">

Then you can check with jQuery like this:

if (!$( document.activeElement ).hasClass("myClass")


$(document).ready(function() {
  function test1() {
    if (!$(document.activeElement).hasClass("myClass")) {
      console.log("Does not have myClass");
    } else {
      console.log("has myClass");
<!DOCTYPE html>
<html xmlns="">

  <script src=""></script>
 <input type="text" class="myClass" value="myClass">
 <input type="text" class="myClass" value="myClass">
 <input type="text" class="differentClass" value="differentClass">

Detect arrow key press in JavaScript, Answer: Use the jQuery keydown() method Let's check out an example to see how this works: <title>jQuery Move DIV Element with Arrow Keys</title>; <style > Here is a tested example of how to detect arrow keys press using JQuery.You can detect up key,down key,left and right keyis pressed. Here is a full code.Run these script in the firebug console.You can test this. JQuery detect arrow keys press Press one of the arrow keys.

Well by default the cursor is inside a text box if it has focus, so you could check if a specific text box has focus via $("..").is(":focus").

jQuery Move an Element to Left/Right/Up/Down with Arrow Keys, To determine which key was pressed, examine the event object that is passed to to a key on the keyboard, including codes for special keys such as arrows. Example: Bind Arrow Keys using jQuery. This example has code that monitors for arrow key hit event and then triggers an alert indicating the arrow key that was hit. Simply execute the following code and hit the arrows keys on your keyboard to see the alert message. XHTML.

.keydown(), To determine which character was entered, examine the event object that is passed keystrokes such as arrow keys, .keydown() or .keyup() is a better choice. How do I detect when one of the arrow keys are pressed? I used this to find out: function checkKey(e) { var event = window.event ? window.event : e; console.log(event.keyCode) } Though it worked for every other key, it didn't for arrow keys (maybe because the browser is supposed to scroll on these keys by default).

.keypress(), To detect which arrow key is pressed, We are going to look at 2 examples. Detecting arrow key presses. button to know which key was pressed the enter key is pressed in a textbox or not using JavaScript / jQuery ? By far best answer. Uses e.which like jQuery recommends for cross-browser, uses e.preventDefault() instead of return false (return false on a jQuery event handler triggers both e.preventDefault() and e.stopPropagation(), the second of which is going to cause any later added events to fail since the event won't propagate to them), and at the end of the switch, will return without calling e

JavaScript, Get code examples like "javascript detect arrow key press" instantly right js capture arrow keys � javascript check if arrow key is being pressed � read add an element to an array javascript � add and remove class in jquery� Note that it isn't always necessary to test whether an element exists. The following code will show the element if it exists, and do nothing (with no errors) if it does not: