>웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 동시 키 누름을 어떻게 감지할 수 있습니까?

JavaScript에서 동시 키 누름을 어떻게 감지할 수 있습니까?

DDD
DDD원래의
2024-12-24 09:16:031017검색

How Can I Detect Simultaneous Key Presses in JavaScript?

JavaScript에서 동시에 여러 키 누름 감지

JavaScript에서는 다음 단계를 통해 여러 키를 동시에 눌렀는지 확인할 수 있습니다.

  1. "맵"이라는 JavaScript 배열을 생성하거나 object.
  2. keydown 및 keyup 이벤트 리스너 내에서 "map" 배열을 조작합니다.

    • 키를 누를 때(keydown 이벤트) 해당 키 코드를 설정합니다. 또는 배열의 키를 "true"로 설정합니다.
    • 키를 놓으면(keyup 이벤트) 해당 키 코드나 배열의 키를 다음으로 설정합니다. "false."
  3. "map" 배열을 활용하여 해당 키 조합을 평가하여 특정 키 조합을 확인합니다. 값.

// Create an array to track key presses
var map = {};

// Add event listeners for keydown and keyup events
document.addEventListener("keydown", function(e) {
  map[e.keyCode] = true;
});
document.addEventListener("keyup", function(e) {
  map[e.keyCode] = false;
});

// Check for key combinations using the map array
if (map[17] && map[16] && map[65]) {
  console.log("Ctrl + Shift + A pressed");
}

사용

  • 이 스크립트는 맵 배열을 다음으로 초기화합니다. 모니터 키를 눌렀을 때.
  • 사용자가 모니터 키를 눌렀을 때 "A" 키, "map[65]" 요소는 "true"로 설정됩니다(Ctrl의 경우 17, Shift의 경우 16, A의 경우 65). map = { 17: true, 16: true, 65: true }.
  • 사용자가 여러 키를 누르면 배열의 해당 요소가 그에 따라 설정됩니다.
  • 특정 키 조합을 감지하려면 다음을 참조하세요. "Ctrl Shift A" 조합을 확인하는 스크립트 내 "if" 조건.

중요 사항

  • keyCode 지원 중단: 이벤트 .keyCode는 이제 더 이상 사용되지 않습니다. 대신 event.key와 같은 대체 접근 방식을 사용해야 합니다.
  • 이벤트 처리 고려 사항: 사용 중인 이벤트 처리 메커니즘(예: element.onkeydown 및 element.addEventListener)에 유의하세요.
  • 브라우저 기본값: 특정 키 조합에는 기본 브라우저 작업이 있을 수 있습니다. 이러한 작업을 방지하려면 event.preventDefault()를 사용하거나 false를 반환하는 것이 좋습니다.
  • return 또는 e.preventDefault()를 사용하여 이벤트 핸들러를 종료할 때는 주의하세요. 이벤트 처리 및 코드 실행에 서로 다른 영향을 미치기 때문입니다.
  • 더 포괄적인 기능을 위해 도우미 클래스를 만들거나 더 깔끔하고 관리하기 쉬운 접근 방식을 위해 선언적 스타일 프로그래밍을 활용할 수 있습니다.

위 내용은 JavaScript에서 동시 키 누름을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.