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

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

---

onkeydown텍스트 상자 의 이벤트에 의해 트리거되는 기능이 있습니다. 사용자가 백 스페이스 키 또는 del 키를 눌렀는지 어떻게 알 수 있습니까?

---

이 시도:

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

---

오늘날이 작업을 수행하는 코드는 다음과 같습니다.

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

앞으로 브라우저에서 광범위하게 지원 되면 더 이상 사용되지 않는 . 대신 .key또는 .code속성을 사용하는 KeyboardEvent것이 좋습니다 .keyCode.

알아 두어야 할 세부 사항 :

• event.preventDefault()keydown 이벤트의 처리기를 호출 하면 키 누르기의 기본 효과가 방지됩니다. 문자를 누르면 활성 텍스트 필드에 입력되지 않습니다. 백 스페이스 키를 누르거나 텍스트 필드에서 삭제하면 문자가 삭제되지 않습니다. 활성 텍스트 필드없이 백 스페이스를 누르면 백 스페이스가 이전 페이지로 돌아가는 Chrome과 같은 브라우저에서 해당 동작을 방지합니다 ( document텍스트 필드 대신 이벤트 리스너를 추가하여 이벤트를 포착하는 한 ).

• 의 값 방법에 대한 설명서 keyCode결정되는 속성이 섹션에서 찾을 수 있습니다 B.2.1를 확인하는 방법 keyCode에 대한 keydown및 keyup이벤트 W3의 UI 이벤트 사양입니다. 특히 Backspace 및 Delete 코드는 B.2.3 고정 가상 키 코드에 나열되어 있습니다 .

• 및.keyCode 에 찬성 하여 속성 을 폐기하려는 노력이 진행 중 입니다. W3는 속성을 "legacy" 로 설명 하고 MDN을 "deprecated"로 설명 합니다..key.code.keyCode

  에 대한 변경의 한 가지 이점 .key및.code 비 ASCII 키보다 강력하고 프로그래머 친화적 인 처리를 데 - 참조 사양을 나열하는 모든 가능한 키 값 과 같은 사람이 읽을 수있는 문자열은, "Backspace"및 "Delete"및 수정 키 특정 이르기까지 모든 값을 포함 미디어 키를 가리기 위해 일본어 키보드에 연결합니다. 이 질문과 매우 관련이있는 또 다른 방법 은 수정 된 키 누르기의 의미 와 누른 물리적 키를 구별 하는 것입니다 .

  에 작은 맥 키보드 , 전혀 없습니다 Delete만, 키Backspace 키를 누릅니다. 그러나 Fn+ Backspace를 누르는 Delete것은 일반 키보드 에서 누르는 것과 동일합니다. 즉 , 텍스트 커서 앞의 문자 대신 텍스트 커서 뒤 의 문자를 삭제 합니다. 사용 사례에 따라 코드에서 당신의 기자 처리 할 수 있습니다 Backspace와 Fn백 스페이스 또는 삭제 중 하나로 누르고 있습니다. 이것이 새로운 키 모델을 통해 선택할 수있는 이유입니다.

  .key속성은 당신에게주는 의미 그래서, 키를 누를 때를Fn + Backspace문자열을 얻을 것입니다 "Delete". .code속성은 당신에게 물리적 인 키를 제공하므로 Fn+ Backspace여전히 문자열을 얻을 것입니다 "Backspace".

  안타깝게도이 답변을 작성하는 현재 브라우저의 18 % 에서만 지원됩니다., so if you need broad compatibility you're stuck with the "legacy" .keyCode attribute for the time being. But if you're a reader from the future, or if you're targeting a specific platform and know it supports the new interface, then you could write code that looked something like this:

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

---

In your function check for the keycode 8 (backspace) or 46 (delete)

키 코드 정보
Keycode list

---

event.key === "Backspace" or "Delete"

더 최근에 훨씬 더 깔끔하게 : 사용 event.key. No more arbitrary number codes!

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Mozilla Docs

지원되는 브라우저

---

Firefox 외부에서 작동하는지 확실하지 않습니다.

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

하지 않을 경우, 교체 event.DOM_VK_BACK_SPACE로8 and event.DOM_VK_DELETE with 46 or define them as constant (for better readability)

참고 URL : https://stackoverflow.com/questions/2353550/how-to-capture-a-backspace-on-the-onkeydown-event