Các phím mũi tên liên kết trong JS / jQuery

Làm cách nào để liên kết một hàm với các phím mũi tên trái và phải trong Javascript và / hoặc jQuery? Tôi đã xem xét plugin js-hotkey cho jQuery (bao bọc hàm liên kết tích hợp để thêm một đối số để nhận ra các khóa cụ thể), nhưng dường như nó không hỗ trợ các phím mũi tên.

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

Nếu bạn cần hỗ trợ IE8, hãy khởi động thân hàm như e = e || window.event; switch(e.which || e.keyCode) {.

(chỉnh sửa 2020)
Lưu ý rằng KeyboardEvent.whichhiện không được chấp nhận. Xem ví dụ này bằng cách sử dụngKeyboardEvent.key một giải pháp hiện đại hơn để phát hiện các phím mũi tên.

$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

Mã ký tự:

37 - trái

38 - lên

39 - phải

40 - xuống

Bạn có thể sử dụng keyCode của các phím mũi tên (37, 38, 39 và 40 cho trái, lên, phải và xuống):

$('.selector').keydown(function (e) {
  var arrow = { left: 37, up: 38, right: 39, down: 40 };

  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

Kiểm tra ví dụ trên ở đây .

Điều này hơi muộn, nhưng HotKeys có một lỗi rất lớn khiến các sự kiện được thực thi nhiều lần nếu bạn gắn nhiều hơn một phím nóng vào một phần tử. Chỉ cần sử dụng jQuery đơn giản.

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});

Tôi chỉ đơn giản là kết hợp các bit tốt nhất từ ​​các câu trả lời khác:

$(document).keydown(function(e){
    switch(e.which) {
        case $.ui.keyCode.LEFT:
        // your code here
        break;

        case $.ui.keyCode.UP:
        // your code here
        break;

        case $.ui.keyCode.RIGHT:
        // your code here
        break;

        case $.ui.keyCode.DOWN:
        // your code here
        break;

        default: return; // allow other keys to be handled
    }

    // prevent default action (eg. page moving up/down)
    // but consider accessibility (eg. user may want to use keys to choose a radio button)
    e.preventDefault();
});

Bạn có thể sử dụng KeyboardJS. Tôi đã viết thư viện cho các nhiệm vụ như thế này.

KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });

Kiểm tra thư viện tại đây => http://robertwhurst.github.com/PalJS/

Một giải pháp ngắn gọn sử dụng Javascript đơn giản (nhờ Sygmoral cho các cải tiến được đề xuất):

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
    }
};

Xem thêm https://stackoverflow.com/a/17929007/1397061 .

Bạn có chắc chắn jQuery.HotKeys không hỗ trợ các phím mũi tên? Tôi đã loay hoay với bản demo của họ trước đó và quan sát trái, phải, lên và xuống hoạt động khi tôi thử nghiệm nó trong IE7, Firefox 3.5.2 và Google Chrome 2.0.172 ...

EDIT : Dường như jquery.hotkeys đã được chuyển đến Github: https://github.com/jeresig/jquery.hotkeys

Thay vì sử dụng return false;như trong các ví dụ trên, bạn có thể sử dụng e.preventDefault();tương tự nhưng dễ hiểu và dễ đọc hơn.

Ví dụ về js thuần với việc đi phải hoặc trái

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });

Bạn có thể sử dụng liên kết jQuery:

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});

Bạn có thể kiểm tra thời tiết arrow keyđược nhấn bởi:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( "arrowkey pressed" );
       return false;
    }
});

ngăn mũi tên chỉ khả dụng cho bất kỳ đối tượng nào khác CHỌN, thực ra tôi không biết về đối tượng khác LOL. nhưng nó có thể dừng sự kiện mũi tên trên trang và loại đầu vào.

tôi đã cố gắng chặn mũi tên trái và phải để thay đổi giá trị của đối tượng SELECT bằng cách sử dụng "e.preventDefault ()" hoặc "return false" trong sự kiện "kepress" "keydown" và "keyup" nhưng nó vẫn thay đổi giá trị đối tượng. nhưng sự kiện vẫn cho bạn biết rằng mũi tên đã được nhấn.

Một thư viện Javascript mạnh mẽ để chụp đầu vào bàn phím và các tổ hợp phím được nhập. Nó không có phụ thuộc.

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});

Tôi đến đây để tìm kiếm một cách đơn giản để cho phép người dùng, khi tập trung vào một đầu vào, sử dụng các phím mũi tên để +1 hoặc -1 một đầu vào số. Tôi chưa bao giờ tìm thấy một câu trả lời hay nhưng làm cho đoạn mã sau có vẻ hoạt động tốt - làm cho trang này trở nên rộng khắp bây giờ.

$("input").bind('keydown', function (e) {
    if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 

Với cà phê & Jquery

  $(document).on 'keydown', (e) ->
    switch e.which
      when 37 then console.log('left key')
      when 38 then console.log('up key')
      when 39 then console.log('right key')
      when 40 then console.log('down key')
    e.preventDefault()