Làm cách nào để phát hiện khi một trong các phím mũi tên được nhấn? Tôi đã sử dụng điều này để tìm hiểu:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

Mặc dù nó hoạt động cho mọi phím khác, nhưng nó không hoạt động cho các phím mũi tên (có thể vì trình duyệt được cho là cuộn trên các phím này theo mặc định).

Phím mũi tên chỉ được kích hoạt bởi onkeydown, không onkeypress.

Các mã khóa là:

• còn lại = 37
• lên = 38
• đúng = 39
• xuống = 40

Trên phím chức năng gọi lên và xuống. Có nhiều mã khác nhau cho mỗi khóa.

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

event.key === "ArrowRight" ...

Gần đây và sạch sẽ hơn nhiều: sử dụng event.key. Không còn mã số tùy ý! Nếu bạn đang dịch mã hoặc biết tất cả người dùng của mình trên các trình duyệt hiện đại, hãy sử dụng cái này!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

Xử lý dài dòng:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

Bạn có thể dễ dàng mở rộng điều này để kiểm tra "w", "a", "s", "d"hoặc bất kỳ khóa nào khác

Tài liệu Mozilla

Trình duyệt được hỗ trợ

PS event.codelà giống nhau cho mũi tên

Có thể là công thức khó khăn nhất:

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

Bản trình diễn (nhờ người dùng Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Điều này sẽ làm việc trên nhiều trình duyệt. Để lại một bình luận nếu có một trình duyệt mà nó không hoạt động.

Có nhiều cách khác để lấy mã khóa (e.which, e.charCode và window.event thay vì e), nhưng chúng không cần thiết. Bạn có thể thử hầu hết trong số họ tại http://www.asapes.net/javascript/tests/KeyCode.html . Lưu ý rằng event.keycode không hoạt động với onkeypress trong Firefox, nhưng nó hoạt động với onkeydown.

Sử dụng keydown, không keypresscho các phím không in được, chẳng hạn như phím mũi tên:

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

Tham chiếu sự kiện khóa JavaScript tốt nhất mà tôi đã tìm thấy (ví dụ như loại bỏ quần quirksmode) tại đây: http://unixpapa.com/js/key.html

Câu trả lời hiện đại vì keyCode hiện không được dùng trong khóa :

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            // up arrow
            break;
        case 'ArrowDown':
            // down arrow
            break;
        case 'ArrowLeft':
            // left arrow
            break;
        case 'ArrowRight':
            // right arrow
    }
};

Tôi tin rằng phương pháp gần đây nhất sẽ là:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

Điều này giả định rằng nhà phát triển muốn mã được kích hoạt ở bất cứ đâu trên trang và khách hàng nên bỏ qua mọi thao tác nhấn phím khác. Loại bỏ sự kiện.preventDefault (); nếu nhấn phím, bao gồm cả những phím được xử lý bởi trình xử lý này vẫn còn hoạt động.

function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;

Đây là một ví dụ thực hiện:

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

Đây là cách tôi đã làm:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}

Tôi đã có thể bẫy chúng bằng jQuery:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

Một ví dụ: http://jsfiddle.net/AjKjU/

Đó là mã làm việc cho chrome và firefox

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>

Tôi cũng đang tìm kiếm câu trả lời này cho đến khi tôi đi qua bài viết này.

Tôi đã tìm thấy một giải pháp khác để biết mã khóa của các khóa khác nhau, phù hợp với vấn đề của tôi. Tôi chỉ muốn chia sẻ giải pháp của tôi.

Chỉ cần sử dụng sự kiện keyup / keydown để ghi giá trị trong bàn điều khiển / cảnh báo tương tự bằng cách sử dụng event.keyCode. giống-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- rupam

Nó ngắn hơn.

function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }

Thư viện này đá! https://craig.is/killing/mice

Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

Bạn cần nhấn chuỗi nhanh một chút để làm nổi bật mã trong trang đó.

Trả lời lại mà bạn keydownkhông cần keypress.

Giả sử bạn muốn di chuyển thứ gì đó liên tục trong khi nhấn phím, tôi thấy nó keydownhoạt động cho tất cả các trình duyệt trừ Opera. Đối với Opera, keydownchỉ kích hoạt trên báo chí 1. Để phù hợp với việc sử dụng Opera:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc

Phím mũi tên được kích hoạt khi gõ phím

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydown cho phép ctrl, alt, shits

onkeyup cho phép tab, mũi tên lên, mũi tên xuống, mũi tên trái, mũi tên xuống

Nếu bạn sử dụng jquery thì bạn cũng có thể làm như thế này,

 $(document).on("keydown", '.class_name', function (event) {
    if (event.keyCode == 37) {
        console.log('left arrow pressed');
    }
    if (event.keyCode == 38) {
        console.log('up arrow pressed');
    }
    if (event.keyCode == 39) {
        console.log('right arrow pressed');
    }
    if (event.keyCode == 40) {
        console.log('down arrow pressed');
    }
 });

kiểm soát các mã khóa %=37và &=38... và chỉ các phím mũi tên còn lại = 37 lên = 38

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}

Nếu bạn muốn phát hiện nhấn phím mũi tên nhưng không cần cụ thể trong Javascript

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}

Với khóa và ES6.

Điều này cung cấp cho bạn một chức năng riêng cho mỗi phím mũi tên mà không cần sử dụng công tắc và cũng hoạt động với các phím 2,4,6,8 trong numpad khi NumLockbật.

const element = document.querySelector("textarea"),
  ArrowRight = k => {
    console.log(k);
  },
  ArrowLeft = k => {
    console.log(k);
  },
  ArrowUp = k => {
    console.log(k);
  },
  ArrowDown = k => {
    console.log(k);
  },
  handler = {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  };

element.addEventListener("keydown", e => {
  const k = e.key;

  if (handler.hasOwnProperty(k)) {
    handler[k](k);
  }
});

<p>Click the textarea then try the arrows</p>
<textarea></textarea>