การตรวจจับการกดปุ่มลูกศรใน JavaScript


458

ฉันจะตรวจสอบได้อย่างไรเมื่อกดปุ่มลูกศรอันใดอันหนึ่ง? ฉันใช้สิ่งนี้เพื่อค้นหา:

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

แม้ว่ามันจะใช้ได้กับทุก ๆ คีย์ แต่มันก็ไม่ได้มีไว้สำหรับปุ่มลูกศร

คำตอบ:


733

ปุ่มลูกศรจะถูกสั่งการโดยonkeydownไม่ใช่onkeypressเท่านั้น

รหัสคือ:

  • left = 37
  • ขึ้น = 38
  • right = 39
  • down = 40

15
เบราว์เซอร์บางตัวเรียกใช้keypressเหตุการณ์สำหรับปุ่มลูกศร แต่คุณใช้keydownงานได้ดีกับปุ่มลูกศร
Tim Down

4
ถ้าคุณกด% คุณจะได้รับรหัส 37
xorcus

9
@xorcus - ไม่คุณได้รับ53กับkeydownเหตุการณ์ คุณจะได้รับ37ด้วยkeypressซึ่งเป็นสิ่งที่แตกต่างกัน
มาร์คคาห์น

7
สิ่งที่เกี่ยวกับ onkeyup
1nfiniti

2
@MrCroft - หรือฟังonkeyupและหยุดเหตุการณ์ที่นั่น อย่างไรก็ตามในความเป็นจริงคุณไม่ควรปรับเปลี่ยนพฤติกรรม UI ด้วย Javascript
Mark Kahn

225

ฟังก์ชั่นคีย์ขึ้นและลงโทร มีรหัสที่แตกต่างกันสำหรับแต่ละคีย์

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
    }

}

บรรทัดที่สองทำอะไร
eshellborn

16
หากต้องการชี้แจงให้ชัดเจน 'e || window.event 'หมายความว่าหาก' e 'เป็นค่าที่กำหนดไว้มันจะเป็นผลลัพธ์ของ' || ' การแสดงออก หากไม่ได้กำหนด 'e' ไว้ 'window.event' จะเป็นผลลัพธ์ของ '||' การแสดงออก ดังนั้นโดยทั่วไปแล้วการจดชวเลขสำหรับ: e = e ? e : window.event; หรือ:if (typeof(e) === "undefined") { e = window.event; }
Michael Calvin

17
มันจะทำให้มันทำงานบน IE เวอร์ชันเก่า (ก่อน IE9) ซึ่งเหตุการณ์ไม่ได้ถูกส่งผ่านไปยังฟังก์ชันตัวจัดการ
มาร์คโรดส์

12
เพียงแค่ต้องทราบว่า keyCode เป็นตัวเลขและควรใช้
===

11
@ketan จุดคือการที่ keyCode เป็นจำนวนและควรได้รับการตรวจสอบเช่นkeyCode === 32ไม่ได้หรือkeyCode == '32' keyCode === '32'
Nenotlep

98

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

อื่น ๆ event.keyที่ผ่านมาและทำความสะอาดมากใช้งาน: ใช้ ไม่มีรหัสตัวเลขอื่น ๆ อีกต่อไป! หากคุณกำลัง transpiling หรือรู้ว่าผู้ใช้ทั้งหมดอยู่ในเบราว์เซอร์ที่ทันสมัยให้ใช้สิ่งนี้!

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

การจัดการอย่างละเอียด:

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

คุณสามารถขยายได้อย่างง่ายดายเพื่อตรวจสอบ"w", "a", "s", "d"หรือคีย์อื่น ๆ

เอกสาร Mozilla

เบราว์เซอร์ที่รองรับ

PS event.codeเหมือนกันสำหรับลูกศร


5
ขอบคุณที่ใช้งานkeyและไม่ได้keyCodeถูกคัดค้าน
v010dya

8
หมายเหตุจาก MDN: Internet Explorer, Edge (16 ขึ้นไป) และ Firefox (36 ขึ้นไป) ใช้ "Left", "Right", "Up", "Up" และ "Down" แทน "ArrowLeft", "ArrowRight", "ArrowUp" "และ" ArrowDown "
Simon

95

อาจเป็นสูตรที่ยากที่สุด:

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

ตัวอย่าง (ขอบคุณผู้ใช้ Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

สิ่งนี้จะทำงานข้ามเบราว์เซอร์ แสดงความคิดเห็นหากมีเบราว์เซอร์ที่ใช้งานไม่ได้

มีวิธีอื่นในการรับรหัสกุญแจ (เช่น e.charCode และ window.event แทน e) แต่ไม่ควรจำเป็น คุณสามารถลองที่สุดของพวกเขาออกที่http://www.asquare.net/javascript/tests/KeyCode.html โปรดทราบว่า event.keycode ไม่ทำงานกับ onkeypress ใน Firefox แต่ทำงานกับ onkeydown


3
ฉันต้องค้นหาคำจำกัดความของterseจากนั้นฉัน (sprightfully) ที่ตั้งสมมติฐานว่าtersestเป็นการผันที่ไม่เหมาะสม อนิจจาฉันยอมรับ: ความห่วงใยของฉันคือหักล้าง
ashleedawg

20

ใช้keydownไม่ได้keypressสำหรับคีย์ที่ไม่สามารถพิมพ์เช่นปุ่มลูกศร:

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

document.onkeydown = checkKey;

การอ้างอิงเหตุการณ์คีย์ JavaScript ที่ดีที่สุดที่ฉันเคยพบ (การตีกางเกงนอก quirksmode เป็นต้น) อยู่ที่นี่: http://unixpapa.com/js/key.html


16

คำตอบที่ทันสมัยเนื่องจากkeyCodeไม่สนับสนุนคีย์ :

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

12

ฉันเชื่อว่าวิธีการล่าสุดจะเป็น:

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

สิ่งนี้ถือว่าผู้พัฒนาต้องการให้รหัสทำงานในที่ใดก็ได้บนหน้าเว็บและลูกค้าควรเพิกเฉยการกดปุ่มอื่น ๆ กำจัด event.preventDefault (); ขึ้นบรรทัดหากมีการกดปุ่มรวมถึงที่จับโดยตัวจัดการนี้ควรจะยังคงใช้งานอยู่


9
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;

1
arrsการใช้ฟังก์ชั่นนอกฟังก์ชั่นคุ้มค่าหรือไม่? ไม่จำเป็นต้องสร้างใหม่ทุกครั้งที่โทร
Grief

8

นี่คือตัวอย่างการใช้งาน:

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

ฉันได้รับ$ 0 ไม่ได้ถูกกำหนด var targetElement = typeof $0 !== 'undefined' ? $0 : document.body;หรือเพียงแค่: var targetElement = document.body;ก็โอเค
papo

7

นี่คือวิธีที่ฉันทำ:

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.
}

5

ฉันสามารถดักจับพวกมันด้วย jQuery:

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

ตัวอย่าง: http://jsfiddle.net/AjKjU/


4
keypressจะไม่ทำงานกับปุ่มลูกศร คุณต้องใช้$(document).on('keydown', function() {...})แทน
Juribiyan

4

นั่นคือรหัสการทำงานสำหรับโครเมี่ยมและ 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>

3

ฉันกำลังมองหาคำตอบนี้จนกว่าฉันจะเจอโพสต์นี้

ฉันได้พบวิธีแก้ไขปัญหาอื่นเพื่อให้ทราบรหัสกุญแจของกุญแจที่แตกต่างกันซึ่งสอดคล้องกับปัญหาของฉัน ฉันแค่อยากจะแบ่งปันวิธีแก้ปัญหาของฉัน

เพียงแค่ใช้ keyup / KeyDown เหตุการณ์ที่จะเขียนค่าในคอนโซล / event.keyCodeแจ้งเตือนเดียวกันโดยใช้ ชอบ-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- รูปี



3

ห้องสมุดนี้หิน! https://craig.is/killing/mice

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

คุณต้องกดลำดับอย่างรวดเร็วเพื่อเน้นรหัสในหน้านั้น


2

อีกครั้งคำตอบที่คุณkeydownไม่ต้องการkeypressไม่ได้

สมมติว่าคุณต้องการย้ายบางสิ่งบางอย่างอย่างต่อเนื่องในขณะที่กดปุ่มฉันพบว่าkeydownใช้ได้กับเบราว์เซอร์ทั้งหมดยกเว้น Opera สำหรับ Opera keydownเฉพาะทริกเกอร์เมื่อกดครั้งที่ 1 เพื่อรองรับการใช้งาน Opera:

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

2

ปุ่มลูกศรจะมีการหารือเกี่ยวกับkeyup

$(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 อนุญาตให้ ctrl, alt, shits

onkeyup อนุญาตให้แท็บลูกศรขึ้นลูกศรลงลูกศรซ้ายลูกศรลง


1

หากคุณใช้ jQuery คุณสามารถทำเช่นนี้ได้

 $(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');
    }
 });

0

ควบคุมรหัสคีย์%=37และ&=38... และปุ่มลูกศรเท่านั้น = 37 ขึ้น = 38

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

0

หากคุณต้องการตรวจจับการกดปุ่มลูกศร แต่ไม่ต้องการเฉพาะใน Javascript

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

0

ด้วยกุญแจและ ES6

สิ่งนี้ทำให้คุณมีฟังก์ชั่นแยกต่างหากสำหรับปุ่มลูกศรแต่ละปุ่มโดยไม่ต้องใช้สวิตช์และยังทำงานกับปุ่ม 2,4,6,8 ปุ่มใน numpad เมื่อNumLockเปิด

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>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.