JavaScript 및 jQuery에서 화살표 키를 어떻게 바인딩합니까?

JavaScript 및 jQuery의 화살표 키 키 바인딩

사용자 상호 작용을 향상하려면 특정 키에 기능을 바인딩해야 하는 경우가 많습니다. 화살표 키는 일반적으로 탐색에 사용되지만 JavaScript 및 jQuery에 통합하기 어려울 수 있습니다.

jQuery 솔루션

js-hotkey 플러그인은 향상된 키 바인딩을 제공하지만 기능이 없지만 화살표 키에 대한 지원이 부족합니다. 그러나 jQuery의 keydown 이벤트 핸들러는 대체 솔루션을 제공합니다.

<code class="js">$(document).keydown(function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

순수한 JavaScript 솔루션

JavaScript의 onkeydown 이벤트를 활용하는 것은 화살표 키 키 바인딩에 대한 또 다른 접근 방식입니다.

<code class="js">document.onkeydown = function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
};</code>

브라우저 간 호환성

IE8과 같은 이전 브라우저와의 호환성을 위해 e = e ||를 추가하세요. 창.이벤트; switch(e.which || e.keyCode) { 함수 본문 앞에.

최신 솔루션

KeyboardEvent.which는 이제 더 이상 사용되지 않습니다. 보다 현대적인 접근 방식은 KeyboardEvent.key를 사용하는 것입니다.

<code class="js">document.addEventListener('keydown', function(e) {
    switch (e.key) {
        case 'ArrowLeft':
            // Insert your left arrow key code
            break;
        case 'ArrowUp':
            // Insert your up arrow key code
            break;
        case 'ArrowRight':
            // Insert your right arrow key code
            break;
        case 'ArrowDown':
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

위 내용은 JavaScript 및 jQuery에서 화살표 키를 어떻게 바인딩합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!