onkeydown 이벤트에서 백 스페이스를 캡처하는 방법

Question

텍스트 상자의 onkeydown 이벤트에 의해 트리거되는 함수가 있습니다. 사용자가 백 스페이스 키 또는 델 키 중 하나를 눌렀는지 어떻게 알 수 있습니까? 함수의 키 코드 8 (백 스페이스)에 대한 수표 또는 46

Answer 1

이 시도 : 그것은 파이어 폭스의 외부에서 작동

document.addEventListener("keydown", KeyCheck); //or however you are calling your method 
function KeyCheck(event) 
{ 
    var KeyID = event.keyCode; 
    switch(KeyID) 
    { 
     case 8: 
     alert("backspace"); 
     break; 
     case 46: 
     alert("delete"); 
     break; 
     default: 
     break; 
    } 
} 

Answer 2

(삭제)

Keycode information
Keycode list

Answer 3

확실하지 않은 경우 :

callback (event){ 
    if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE) 
    // do something 
    } 
} 

하지 않을 경우 0

, 46와 8 및 event.DOM_VK_DELETE로 event.DOM_VK_BACK_SPACE를 교체하거나

Answer 4

요즘,이 작업을 수행하는 코드가 같은 것을 보일 것입니다 (가독성을위한)들이 상수 정의 : 비록 미래에

document.getElementById('foo').addEventListener('keydown', function (event) { 
    if (event.keyCode == 8) { 
     console.log('BACKSPACE was pressed'); 

     // Call event.preventDefault() to stop the character before the cursor 
     // from being deleted. Remove this line if you don't want to do that. 
     event.preventDefault(); 
    } 
    if (event.keyCode == 46) { 
     console.log('DELETE was pressed'); 

     // Call event.preventDefault() to stop the character after the cursor 
     // from being deleted. Remove this line if you don't want to do that. 
     event.preventDefault(); 
    } 
}); 

을, 브라우저에서 광범위하게 지원되면 더 이상 사용되지 않는 .keyCode 대신 .key 또는 .code 속성을 KeyboardEvent으로 사용할 수 있습니다. 아는 가치

세부 사항 :

• 는 키를 누를 때의 기본 효과를 방지하는를 keyDown 이벤트의 핸들러에서 event.preventDefault() 호출. 문자를 누르면 활성 텍스트 필드에 문자가 입력되지 않습니다. 텍스트 필드에서 백 스페이스 키나 삭제 키를 누르면 문자가 삭제되지 않습니다. backspace를 사용하면 활성 텍스트 필드없이 백 스페이스를 누르면 Chrome과 같은 브라우저에서 이전 페이지로 돌아갈 수 있으므로 텍스트 필드 대신 document에 이벤트 수신기를 추가하여 이벤트를 잡는 한 해당 동작을 방지 할 수 있습니다.

• keyCode 속성의 값을 결정하는 방법에 대한 문서는 W3의 UI 이벤트 사양의 B.2.1 How to determine keyCode for keydown and keyup events 섹션에서 찾을 수 있습니다. 특히 백 스페이스 및 삭제 코드는 B.2.3 Fixed virtual key codes에 나열됩니다.

• .keyCode 속성을 사용하지 않으려는 노력이 진행 중입니다. .key and .code입니다. W3은 .keyCode 속성을 "legacy", MDN을 "deprecated"으로 설명합니다. .key 및 .code에 변화의

  한 가지 이점은 더 강력하고 프로그래머 친화적 인 비 ASCII 키의 취급 데 - "Backspace" 및 "Delete" 같은 사람이 읽을 수있는 문자열 및 보조 키를 특정에게 이르기까지 모든 값을 포함 the specification that lists all the possible key values를 참조하십시오 일본어 키보드를 사용하여 미디어 키를가립니다. 이 질문과 관련성이 높은 또 하나의 문제는 수정 된 키 누르기과 의 의미를으로 구분하여 을 구별하는 것입니다.small Mac keyboards에

  , 아니 이 키 만 백 스페이스 키를 삭제하지 있습니다. 그러나 누르면 FN + 백 스페이스는 일반 키보드에 삭제 을 누르는 것과 같습니다 - 즉, 그것은 텍스트 커서 대신 그 전에 한 후 문자 을 삭제합니다. 사용 사례에 따라 코드에서 의 백 스페이스을 처리하려는 경우 Fn이 백 스페이스 또는 삭제 중 하나로 눌려져 있습니다. 이것이 바로 새로운 핵심 모델로 인해 선택할 수있는 이유입니다. .key 속성은 당신에게 키를 누를 때의을 의미 을 제공

  , 그래서 FN + 백 스페이스 문자열 "Delete"을 얻을 것입니다. .code 속성은 실제 키를 제공하므로 Fn + 백 스페이스은 여전히 ​​"Backspace" 문자열을 생성합니다.

  불행히도이 대답을 쓰는 시점에서 그들은 단지 supported in 18% of browsers입니다. 따라서 광범위한 호환성이 필요한 경우 당분간 "기존".keyCode 속성이 붙어 있습니다.

  document.getElementById('foo').addEventListener('keydown', function (event) { 
      if (event.code == 'Delete') { 
       console.log('The physical key pressed was the DELETE key'); 
      } 
      if (event.code == 'Backspace') { 
       console.log('The physical key pressed was the BACKSPACE key'); 
      } 
      if (event.key == 'Delete') { 
       console.log('The keypress meant the same as pressing DELETE'); 
       // This can happen for one of two reasons: 
       // 1. The user pressed the DELETE key 
       // 2. The user pressed FN+BACKSPACE on a small Mac keyboard where 
       // FN+BACKSPACE deletes the character in front of the text cursor, 
       // instead of the one behind it. 
      } 
      if (event.key == 'Backspace') { 
       console.log('The keypress meant the same as pressing BACKSPACE'); 
      } 
  }); 
  

Answer 5

이벤트 : 당신이 미래에서 독자이야, 또는 특정 플랫폼을 목표로하고 알고있는 경우는 새로운 인터페이스를 지원하는 경우에, 당신은 같은 것을 보았다 코드를 작성할 수 .key === "백 스페이스"또는 "삭제"

최근의 많은 클리너 : event.key을 사용하십시오. 더 이상 임의의 숫자 코드는 없습니다!

Supported Browsers