Binding Arrow Keys in Js/Jquery

Binding arrow keys in JS/jQuery

document.onkeydown = 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)
};

If you need to support IE8, start the function body as e = e || window.event; switch(e.which || e.keyCode) {.


(edit 2020)

Note that KeyboardEvent.which is now deprecated. See this example using KeyboardEvent.key for a more modern solution to detect arrow keys.

Binding arrow keys in jQuery except in input and textarea

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)
    }
});

jQuery Keypress Arrow Keys

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:

  1. .keypress() will never be fired with Shift, Esc, and Delete but .keydown() will.
  2. Actually .keypress() in some browser will be triggered by arrow keys but its not cross-browser so its more reliable to use .keydown().

More useful information


  1. You can use .which Or .keyCode of the event object - Some browsers won't support one of them but when using jQuery its safe to use the both since jQuery standardizes things. (I prefer .which never had a problem with).
  2. To detect a ctrl | alt | shift | META press with the actual captured key you should check the following properties of the event object - They will be set to TRUE if they were pressed:

    • event.ctrlKey - ctrl
    • event.altKey - alt
    • event.shiftKey - shift
    • event.metaKey - META ( Command ⌘ OR Windows Key )

  3. Finally - here are some useful key codes ( For a full list - keycode-cheatsheet ):

    • Enter: 13
    • Up: 38
    • Down: 40
    • Right: 39
    • Left: 37
    • Esc: 27
    • SpaceBar: 32
    • Ctrl: 17
    • Alt: 18
    • Shift: 16

How to move selected elements using arrow keys

This is an example of how to "drag" DOM elements with arrow key's without using jQuery UI draggable.

In this example jQuery .before() and .after() functions are used to place elements to a new location.

$('.el').click(function(){        $('.el').removeClass('active');       $(this).addClass('active');  });
$('body').on('keyup',function(e){
switch(e.which) {        case 37: // left          var tmp_id = $('.el.active').prev().attr('id');           $('#' + tmp_id).animate({ opacity: 0 }, 100, function(){            $('.el.active').after($('.el.active').prev());            });                   $('#' + tmp_id).animate({ opacity: 1 }, 300);        break;
        case 38: // up          var active_index = $('.el.active').index();          var index_min = $('.el.active').parent().children().first().index();                    var index_max = $('.el.active').parent().children().last().index();             var next_element = $('.el.active').parent().prev().children(':eq('+active_index+')');                    if(index_min === active_index){           var prev_el = next_element.next();            $('.el.active').before(next_element);           $(prev_el).before($('.el.active'));          }                    if(index_max === active_index || (active_index > index_min && active_index < index_max )){           var prev_el = next_element.prev();             $('.el.active').before(next_element);            $(prev_el).after($('.el.active'));          }                                      break;
        case 39: // right          var tmp_id = $('.el.active').next().attr('id');          $('#' + tmp_id).animate({ opacity: 0 }, 100, function(){            $('.el.active').before($('.el.active').next());          });                             $('#' + tmp_id).animate({ opacity: 1 }, 300);                           break;
        case 40: // down          var active_index = $('.el.active').index();          var index_min = $('.el.active').parent().children().first().index();                    var index_max = $('.el.active').parent().children().last().index();                 var next_element = $('.el.active').parent().next().children(':eq('+active_index+')');          var prev_el = next_element.prev();                     if(index_min === active_index){           var prev_el = next_element.next();            $('.el.active').before(next_element);           $(prev_el).before($('.el.active'));          }                    if(index_max === active_index || (active_index > index_min && active_index < index_max )){           var prev_el = next_element.prev();             $('.el.active').before(next_element);           $(prev_el).after($('.el.active'));          }                                           break;
        default: return; // exit this handler for other keys    }    e.preventDefault();
});
.container{  width: 100%;    }
div[id^="el-wr"]{    width: 280px;    margin: 0 auto;  }
.el{  width: 60px;  height: 60px;  background-color: #aaa;   margin: 5px;  float: left;   cursor: pointer;     text-align: center;  line-height: 60px;  font-size: 28px;  color: white;}
.active{  background-color: #525252;   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div id="el-wr0">
          <div class="el" id="index1">1</div>
          <div class="el" id="index2">2</div>
          <div class="el" id="index3">3</div>                    <div class="el" id="index4">4</div>
  </div>    <div id="el-wr1">
          <div class="el" id="index5">5</div>
          <div class="el" id="index6">6</div>
          <div class="el" id="index7">7</div>                    <div class="el" id="index8">8</div>
  </div>    <div id="el-wr2">
          <div class="el" id="index9">9</div>
          <div class="el" id="index10">10</div>
          <div class="el" id="index11">11</div>                    <div class="el" id="index12">12</div>
  </div>
  

</div>

How to use arrow keys to move selected elements

If you use $this.position() for getting position, your code will work just fine.

function getpos(e) {  return {    X: e.pageX,    Y: e.pageY  };}
function Rect(start, stop) {  this.left = Math.min(start.X, stop.X);  this.top = Math.min(start.Y, stop.Y);  this.width = Math.abs(stop.X - start.X);  this.height = Math.abs(stop.Y - start.Y);}
$(function() {  var startpos;  var selected = $([]),    offset = {      top: 0,      left: 0    };  $(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable();
  // http://stackoverflow.com/questions/705250/is-there-a-jquery-plugin-which-combines-draggable-and-selectable#8643716  // teha: seal on ka mousedown mis andis viga, kaseda kasutada  var $liigutatavad = $(".designer-verticalline, .designer-horizontalline, .designer-rectangle, .designer-field, .designer-image, .designer-label");  $liigutatavad.draggable({    start: function(event, ui) {      var $this = $(this);
      if ($this.hasClass("ui-selected")) {        // if this is selected, attach current offset        // of each selected element to that element        selected = $(".ui-selected").each(function() {          var el = $(this);          el.data("offset", el.offset());        });      } else {        // if this is not selected, clear current selection        selected = $([]);        $liigutatavad.removeClass("ui-selected");      }      offset = $this.offset();    },
    drag: function(event, ui) {      // drag all selected elements simultaneously      var dt = ui.position.top - offset.top,        dl = ui.position.left - offset.left;      selected.not(this).each(function() {        var $this = $(this);        var elOffset = $this.data("offset");        $this.css({          top: elOffset.top + dt,          left: elOffset.left + dl        });      });
      // this does not fix the issue:      //$(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable();    }  });
  // ...but manually implement selection to prevent interference from draggable()  $(".designer-panel-body").on("click", "div", function(e) {    if ( /*!e.metaKey &&*/ !e.shiftKey && !e.ctrlKey) {      // deselect other elements if meta/shift not held down      $(".designer-panel-body").removeClass("ui-selected");      $(this).addClass("ui-selected");    } else {      if ($(this).hasClass("ui-selected")) {        $(this).removeClass("ui-selected");      } else {        $(this).addClass("ui-selected");      }    }
    //var selectable = $("#container").data("selectable");    //selectable.refresh();    //$( ".designer-panel-body" ).data("selectable")._mouseStop(null);  });
  $(".designer-panel-body").selectable({      selected : function() {          $(".ui-selected").first().focus();      }  });

  $(".designer-panel-body").keydown(function(e) {    switch (e.which) {      case 37: // left        $(".ui-selected").each(function() {          var $this = $(this);          var $position = $this.position();          $this.css({            left: $position.left - 2          });        });        break;
      case 38: // up        $(".ui-selected").each(function() {          var $this = $(this);          var $position = $this.position();          $this.css({            top: $position.top - 2          });        });        break;
      case 39: // right        $(".ui-selected").each(function() {          var $this = $(this);          var $position = $this.position();          $this.css({            left: $position.left + 2          });        });        break;
      case 40: // down        $(".ui-selected").each(function() {          var $this = $(this);          var $position = $this.position();          $this.css({            top: $position.top + 2          });        });        break;
      default:        return; // exit this handler for other keys    }    e.preventDefault(); // prevent the default action (scroll / move caret)  });

});
.designer-panel-body {  min-height: 1px;  overflow: hidden;  margin: 0;  padding: 0;}.panel-footer {  background-color: inherit;}.designer-panel,.designer-resetmargins {  margin: 0;  padding: 0;}.designer-verticalline,.designer-horizontalline,.designer-rectangle {  font-size: 1pt;  border: 1px solid #000000;}.designer-field {  border: 1px solid lightgray;  white-space: pre;  overflow: hidden;}.ui-selecting {  background-color: lightskyblue;  color: white;}.ui-selected {  background-color: lightskyblue;  border-color: darkblue;  color: white;}.designer-label {  white-space: pre;  /*overflow: hidden;*/}.designer-field,.designer-label {  font-family: "Times New Roman";  font-size: 10pt;  z-index: 2;}.designer-verticalline,.designer-horizontalline,.designer-rectangle,.designer-field,.designer-image,.designer-label {  position: absolute;}
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><div class='panel designer-panel'>  <div class='panel-body designer-panel-body panel-warning' style='height:9.37cm'>
    <div class='designer-field' contenteditable='true' style='top:2.30cm;left:5.84cm;width:10.24cm;height:0.63cm;font-family:Arial;font-size:14pt;font-weight:bold;'>vnimi+' '+dok.tasudok</div>    <div class='designer-field' contenteditable='true' style='top:2.30cm;left:16.37cm;width:2.68cm;height:0.61cm;font-size:14pt;'>DOK.kuupaev</div>    <div class='rectangle' style='border-width: 1px;background-color:#FFFFFF;top:2.99cm;left:1.34cm;width:18.05cm;height:5.29cm'></div>    <div class='designer-field' contenteditable='true' style='top:3.01cm;left:1.53cm;width:9.71cm;height:0.55cm;font-size:12pt;'>m.FIRMA</div>    <div class='designer-field' contenteditable='true' style='top:3.01cm;left:12.13cm;width:3.13cm;height:0.53cm;font-size:12pt;'>ise.telefon</div>    <div class='designer-field' contenteditable='true' style='top:3.01cm;left:17.11cm;width:1.89cm;height:0.55cm;font-size:12pt;text-align:right;'>ise.regnr</div>    <div class='designer-label' contenteditable='true' style='top:3.04cm;left:11.39cm;text-align:right;font-size:12pt;'>Tel.</div>    <div class='designer-label' contenteditable='true' style='top:3.04cm;left:15.71cm;font-size:12pt;'>Reg.Nr</div>    <div class='designer-field' contenteditable='true' style='top:3.62cm;left:1.55cm;width:9.45cm;height:0.55cm;font-size:12pt;'>ise.tanav</div>    <div class='designer-field' contenteditable='true' style='top:3.70cm;left:15.16cm;width:3.37cm;height:0.55cm;font-size:12pt;'>ise.vatpayno</div>    <div class='designer-label' contenteditable='true' style='top:3.72cm;left:12.89cm;text-align:right;font-size:12pt;'>KMKR nr</div>    <div class='designer-field' contenteditable='true' style='top:4.30cm;left:1.58cm;width:9.08cm;height:0.55cm;font-size:12pt;'>rtri(ise.postiindek)+' '+rtri(ise.piirkond)</div>    <div class='designer-field' contenteditable='true' style='top:4.30cm;left:14.66cm;width:4.34cm;height:0.55cm;font-size:12pt;text-align:right;'>aarve(dok.arvekonto, 'konto.arveldusar')</div>    <div class='designer-label' contenteditable='true' style='top:4.33cm;left:13.89cm;font-size:12pt;'>A/A</div>    <div class='designer-horizontalline' style='border-width: 1px;top:4.96cm;left:1.34cm;width:18.03cm;height:0.00cm'></div>    <div class='designer-field' contenteditable='true' style='top:5.04cm;left:17.13cm;width:1.89cm;height:0.55cm;font-size:12pt;text-align:right;'>klient.regnr</div>    <div class='designer-field' contenteditable='true' style='top:5.06cm;left:4.18cm;width:12.71cm;height:0.55cm;font-size:12pt;'>klient.nimi</div>    <div class='designer-label' contenteditable='true' style='top:5.06cm;left:15.74cm;font-size:12pt;'>Reg.Nr</div>    <div class='designer-label' contenteditable='true' style='top:5.09cm;left:1.63cm;font-size:12pt;'>Maksja</div>    <div class='designer-field' contenteditable='true' style='top:5.72cm;left:1.53cm;width:11.68cm;height:0.55cm;font-size:12pt;'>klient.tanav</div>    <div class='designer-field' contenteditable='true' style='top:5.72cm;left:15.18cm;width:3.37cm;height:0.55cm;font-size:12pt;'>klient.vatpayno</div>    <div class='designer-label' contenteditable='true' style='top:5.75cm;left:12.92cm;text-align:right;font-size:12pt;'>KMKR nr</div>    <div class='designer-field' contenteditable='true' style='top:6.38cm;left:1.53cm;width:11.84cm;height:0.55cm;font-size:12pt;'>rtri(klient.postiindek)+' ' +rtri(klient.piirkond)</div>    <div class='designer-field' contenteditable='true' style='top:6.38cm;left:13.47cm;width:3.37cm;height:0.55cm;font-size:12pt;'>sql("sele transfld('nimetus', 'riik', rapopref()) from riik where kood=klient.riik2", '' )</div>    <div class='designer-field' contenteditable='true' style='top:6.99cm;left:3.71cm;width:12.16cm;height:1.16cm;font-size:12pt;'>klient.aadress</div>    <div class='designer-label' contenteditable='true' style='top:7.01cm;left:1.45cm;text-align:right;font-size:12pt;'>Postiaadress</div>    <div class='designer-field' contenteditable='true' style='top:8.33cm;left:3.95cm;width:2.11cm;height:0.55cm;font-size:12pt;'>dok.tasukuup</div>    <div class='designer-field' contenteditable='true' style='top:8.33cm;left:6.08cm;width:8.05cm;height:0.55cm;font-size:12pt;'>eval( 'maksetin.' +left(rapopref()+'tingimus',10))</div>    <div class='designer-label' contenteditable='true' style='top:8.35cm;left:1.45cm;font-size:12pt;'>Maksetähtaeg</div>    <div class='designer-field' contenteditable='true' style='top:8.91cm;left:1.45cm;width:13.66cm;height:0.45cm;'>iif(!empty(dok.saaja), IR("Saaja: ")+sql('sele rtri(nimi)+" "+rtri(tanav)+" "+rtri(piirkond)+" "+rtri(postiindek) from klient where kood=dok.saaja',''),'')</div>  </div>  <div class='bg-warning'>    <div class='panel-footer'><i class='glyphicon glyphicon-chevron-up'></i> GroupHeader 1: str(dokumnr)+str(koopia,2)</div>  </div></div>

jQuery: How to detect arrow key press only on certain element

Instead of

$(document).keydown(function(e) {

in your javascript code have

$(<selector>).keydown(function(e) {

where <selector> points to the element you want to track.

UPDATE

Better - since you mention dynamically added elements, use delegation structure of event binding:

$(document).on("keydown", ".<yourClassName>", function(e) {

jQuery keypress left/right navigation

$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    $("#showroom").animate({
      left: "-=980"
    });
  }
  else if(e.keyCode == 39) { // right
    $("#showroom").animate({
      left: "+=980"
    });
  }
});

Related Topics

Render Partial View Using Jquery in ASP.NET MVC

Where Do You Include the Jquery Library From? Google JSAPI? CDN

Accessing Jpeg Exif Rotation Data in JavaScript on the Client Side

Pass Props in Link React-Router

How to Configure Cors in a Spring Boot + Spring Security Application

Form Serialize JavaScript (No Framework)

Are "(Function ( ) { } ) ( )" and "(Function ( ) { } ( ) )" Functionally Equal in JavaScript

How to Find Index of All Occurrences of Element in Array

Execute Script After Specific Delay Using JavaScript

How to Deal with Big Numbers in JavaScript

Why Doesn't a JavaScript Return Statement Work When the Return Value Is on a New Line

What Do These JavaScript Bitwise Operators Do

Programmatically Lighten or Darken a Hex Color (Or Rgb, and Blend Colors)

Filter Object Properties by Key in Es6

Using "Object.Create" Instead of "New"

Stop Execution of JavaScript Function (Client Side) or Tweak It

Promise - How to Force Cancel a Promise

How to Call a JavaScript Function on Page Load


Leave a reply



Submit