onKeyPress Vs. onKeyUp 및 onKeyDown

이 세 가지 사건의 차이점은 무엇입니까? 인터넷 검색시 나는 그것을 발견했다 :

• onKeyDown사용자가 키를 누를 때 이벤트가 트리거됩니다.
• onKeyUp사용자가 키를 놓을 때 이벤트가 트리거됩니다.
• onKeyPress이벤트가 트리거 될 때, 사용자의 누름 및 해제 (키 onKeyDown하였다 onKeyUp).

처음 두 가지를 이해하지만 onKeyPress같지 onKeyUp않습니까? 키 onKeyUp를 누르지 않고 키 ( ) 를 놓을 수 onKeyDown있습니까 ( )?

이것은 약간 혼란 스럽습니다. 누군가 나를 위해 이것을 정리할 수 있습니까?

이 답변에 원래 사용 된 보관 링크 는 여기를 확인하십시오 .

그 링크에서 :

이론적으로 onKeyDown및 onKeyUp이벤트는 누르거나 놓은 키를 나타내는 반면 onKeyPress이벤트는 입력되는 문자를 나타냅니다. 이론의 구현이 모든 브라우저에서 동일하지는 않습니다.

KeyPress, KeyUp및 KeyDown각각과 유사합니다 : Click, MouseUp,및 MouseDown.

1. Down 먼저 일어난다
2. Press 두 번째 발생 (텍스트를 입력 할 때)
3. Up 마지막으로 발생합니다 (텍스트 입력이 완료된 경우).

예외는 webkit 이며 여기에 추가 이벤트가 있습니다.

keydown
keypress
textInput     
keyup

아래는 이벤트가 시작될 때 직접 확인할 수있는 스 니펫입니다.

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

답변의 대부분은 여기에 실제적인 문제보다는 이론에 더 집중하고 사이에 큰 차이가있다 keyup하고 keypress는, 입력 필드 값에 관한 파이어 폭스에서 적어도 (43 테스트) 등은.

사용자 1가 빈 입력 요소를 입력하는 경우 :

1. 입력 요소의 값은 keypress핸들러 내부에 빈 문자열 (이전 값)이됩니다.

2. 입력 요소의 값은 핸들러 1내에서 (새로운 값)이됩니다 keyup.

인라인 유효성 검사 또는 자동 태 빙과 같은 현재 값이 아니라 입력 후 새로운 값을 아는 작업을 수행하는 경우 이는 매우 중요합니다.

대본:

1. 사용자 12345가 입력 요소를 입력합니다.
2. 사용자가 텍스트를 선택합니다 12345.
3. 사용자는 문자를 입력 A합니다.

때 keypress이벤트가 문자를 입력 한 후 화재 A, 텍스트 상자는 이제 문자가 들어 있습니다 A.

그러나:

1. Field.val ()은 12345입니다.
2. $ Field.val (). length는 5
3. 사용자 선택 사항은 빈 문자열입니다 (선택 사항을 겹쳐 써서 삭제 된 내용을 판별하지 못하게 함).

따라서 브라우저 (Firefox 43)는 사용자의 선택을 지우고 이벤트 를 발생시킨 다음 필드 내용 을 업데이트 한 다음 실행 합니다.keypresskeyup

onkeydown바로 가기와 같이 키 가 눌려 지면 시작됩니다 (예 : in Ctrl+A) Ctrl.

onkeyup 키에서 손을 떼면 발동됩니다 (modifier / etc 키 포함)

onkeypressonkeydown및 의 조합으로 onkeyup또는 키보드 반복에 따라 실행됩니다 (실행 onkeyup되지 않은 경우 ). (이 반복 동작은 테스트하지 않은 것입니다. 테스트를 수행하는 경우 주석을 추가하십시오!)

textInput(웹킷 만) 일부 텍스트를 입력하면 시작됩니다 (예 : Shift+A대문자 'A'를 입력하지만 Ctrl+A텍스트를 선택하고 텍스트 입력을 입력하지 않습니다.이 경우 다른 모든 이벤트가 시작됩니다)

첫째, 그들은 다른 의미를 가지고 있습니다.

• KeyDown – 키를 눌렀을 때
• 푸쉬 버튼 된 -의 keyup 발표 한 후 입력 값 / 텍스트 영역 (이들 중 하나만) 업데이트 될
• KeyPress – 이들 사이에서 실제로 키를 눌렀다가 놓은 것은 아닙니다 (아래 참조).

둘째, 일부 키는 이러한 이벤트 중 일부를 발생시키고 다른 키를 발생시키지 않습니다 . 예를 들어

• 키를 누를 때 무시는 delete, 화살표, PgUp/ PgDn, home/ end, ctrl, alt, shift등에서 KeyDown과의 keyup (약 세부 사항이 표시되지 않는 동안 esc아래)를;
• Windows에서 alt+ tab를 통해 alt창을 전환하면 다른 이벤트 전에 창 전환이 발생하기 때문에 KeyDown 만 발생합니다 (그리고 tab시스템에 의해 KeyDown 은 방지되어 있습니다. 적어도 Chrome 71에서는 가정합니다).

또한 event.keyCode(및 event.which)는 일반적으로 KeyDown 및 KeyUp의 값은 동일하지만 KeyPress의 값은 다릅니다. 내가 만든 놀이터를 사용해보십시오 . 내가 누를 때 크롬에서 : 그건 그렇고, 나는 꽤 특질을 발견했습니다 ctrl+ a와 input/는 textarea로 키 누르기 화재를 들어, 비어 event.keyCode(과 event.which) 같 1! (입력이 비어 있지 않으면 전혀 발생하지 않습니다).

마지막으로 몇 가지 실용성이 있습니다 .

• 화살표를 처리하려면 아마도 onKeyDown을 사용해야 할 것입니다. 사용자 ↓가을 누르고 있으면 KeyDown이 여러 번 실행됩니다 (KeyUp은 버튼을 놓을 때 한 번만 실행됩니다). 또한 KeyDown의 전파를 쉽게 막을 수는 있지만 KeyUp의 전파를 막을 수는 없습니다 (또는 텍스트 필드에 줄 바꿈을 추가하지 않고 enter를 제출하려는 경우).
• 놀랍게도 textareaKeyPress와 KeyDown이 여러 번 발생 하는 키 (Chrome 71) 를 누른 상태에서 여러 번 발생하는 이벤트가 필요하면 KeyDown을 사용하고 단일 키 릴리스를 위해 KeyUp을 사용합니다.
• KeyDown은 일반적으로 액션에 대한 응답 성을 향상시켜야 할 때 게임에 더 좋습니다.
• esc일반적으로 KeyDown을 통해 처리됩니다. KeyPress는 실행되지 않으며 KeyUp은 다른 브라우저에서 inputs와 textareas에 대해 다르게 동작 합니다 (주로 포커스 손실로 인해)
• 텍스트 영역의 높이를 내용에 맞게 조정하려면 onKeyDown을 사용하지 말고 onKeyPress를 사용하십시오 ( PS ok, 실제로이 경우에는 onChange를 사용하는 것이 좋습니다 ).

내 프로젝트에서 3을 모두 사용했지만 불행히도 일부 실용주의를 잊었을 수 있습니다. (: 거기에 또한 주목해야합니다 input및 change이벤트)

이 글 월 볼터에 의해 내가 건너 온 한 최고의 작품이다, 당신은 아카이브 사본을 찾을 수 있습니다 여기에 링크가 죽은 경우.

모든 브라우저 키 이벤트를 잘 설명합니다.

를 keyDown 이벤트가 키를 누를 경우, 키 누름 이벤트 바로 뒤에 발생한다. 그런 다음 키를 놓을 때 키업 이벤트가 생성됩니다.

사이의 차이를 이해하기 를 keyDown 과 키를 누를 수 , 그것을 구별하는 데 유용합니다 문자 와 키 . 키는 컴퓨터 키보드의 물리적 버튼입니다. 문자 버튼을 눌러 입력 한 상징이다. 미국 키보드에서 4키를 누른 상태에서 Shift키를 누르면 일반적으로 "달러 기호"문자가 생성됩니다. 전 세계 모든 키보드에서 반드시 그런 것은 아닙니다. 이론적으로 keydown 및 keyup 이벤트는 키를 누르거나 놓는 동안 키 누르기를 나타냅니다이벤트는 입력되는 문자를 나타냅니다. 실제로 이것이 항상 구현되는 것은 아닙니다.

잠시 동안 일부 브라우저는 keypress 직후에 textInput 이라는 추가 이벤트를 시작했습니다 . DOM 3 표준의 초기 버전은 이것을 키 누르기 이벤트 의 대체물로 의도 했지만 나중에 전체 개념이 취소되었습니다. Webkit은 버전 525와 533 사이에서 이것을 지원했으며 IE가 그것을 지원한다고 말했지만 IE가 textinput 이라고하는 동안 Webkit이 textInput 이라고 요구했기 때문에 나는 그것을 감지하지 못했습니다 .

모든 브라우저에서 지원하는 input 이라는 이벤트도 있습니다.이 이벤트 는 텍스트 영역 또는 입력 필드 를 변경 한 직후에 발생 합니다. 일반적으로 키를 누르면 텍스트 영역에 입력 한 문자가 나타나고 입력이 시작됩니다. 입력 이벤트는 실제로 키가 입력 있었는지에 대한 정보를 제공하지 않습니다 - 당신이 변경 무엇을 알아 내기 위해 텍스트 상자를 검사해야 할 것 - 우리가 정말 그것을 키 이벤트를 고려하지 않도록 정말 여기를 문서화하지 않습니다 . 원래 텍스트 영역과 입력 상자에 대해서만 정의되었지만 다른 유형의 객체에서도 실행되도록 일반화하는 데 약간의 움직임이 있다고 생각합니다.

onkeypress와 onkeydown은 동일한 작업을 수행하는 것 같습니다 (위에서 이미 언급 한 바로 가기 키의 작은 차이를 말합니다).

당신은 이것을 시도 할 수 있습니다 :

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

키를 누를 때가 아니라 키를 누를 때 onkeypress 및 onkeydown 이벤트가 모두 트리거되는 것을 볼 수 있습니다.

차이점은 이벤트가 한 번이 아니라 여러 번 트리거된다는 것입니다 (키를 누르고있는 한). 이를 알고 적절히 처리하십시오.

onkeypress 이벤트는 onkeydown 이벤트가 모든 키에 대해 작동하는 모든 브라우저에서 ALT, CTRL, SHIFT, ESC를 제외한 모든 키에 작동합니다. onkeydown 이벤트는 모든 키를 캡처 함을 의미합니다.

호기심을 나누고 싶었습니다.

onkeydown 이벤트를 사용하여 JS 메소드를 활성화 할 때 해당 이벤트의 문자 코드는 onkeypress와 동일한 문자 코드가 아닙니다!

예를 들어 숫자 키패드 키는 onkeypress를 사용할 때 문자 키 위의 숫자 키와 동일한 문자 코드를 반환하지만 onkeydown을 사용할 때는 아닙니다.

onkeydown을 사용할 때 특정 문자를 확인한 스크립트가 실패한 이유를 알아 내기 위해 몇 초가 걸렸습니다!

데모 : https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

그리고 그렇습니다. 메소드의 정의가 다르다는 것을 알고 있습니다 .. 그러나 매우 혼란스러운 것은 두 메소드 모두에서 event.keyCode를 사용하여 이벤트 결과를 검색하지만 동일한 값을 반환하지 않는다는 것입니다. 선언적 구현.

기본적으로 이러한 이벤트는 브라우저 유형과 버전에 따라 다르게 작동하며 약간의 jsBin 테스트를 만들었으며 대상 환경에 대해 이러한 이벤트가 어떻게 작동하는지 콘솔을 확인할 수 있습니다. http://jsbin.com/zipivadu/10/edit

업데이트 된 답변 :

키 다운

• 키를 누르고 있으면 여러 번 발사됩니다.
• 메타 키를 발생시킵니다.

키 누름

• 키를 누르고 있으면 여러 번 발사됩니다.
• 않습니다 하지 메타 키를 화재.

키업

• 키를 놓으면 마지막에 한 번 발사됩니다.
• 메타 키를 발생시킵니다.

이것은 addEventListener및 의 동작입니다 jQuery.

https://jsbin.com/vebaholamu/1/edit?js,console,output <-예제 사용

(답변은 올바른 응답, 스크린 샷 및 예제로 편집되었습니다)

처리 할 이벤트를 결정하는 데 유용한 몇 가지 실용적인 사실 (아래 스크립트를 실행하고 입력 상자에 집중) :

$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

누르기 :

• 비 삽입 / 입력 키 (예를 들어 Shift, Ctrl)를 트리거하지 않을 것이다 keypress. 보도 Ctrl하고 해제 :

  키 다운 17 17 제어

  키업 17 17 컨트롤

• 다른 문자로 문자 변환을 적용 키보드에서 키가 발생할 수 있습니다 죽은 및 "키"를 복제 (예를 들어 ~, ´에) keydown. 보도 ´더블을 표시하기 위해 그것을 풀어 ´´:

  keydown 192192 죽은

  키 다운 192192 ´´

  키 누르기 180180 ´

  키 누르기 180180 ´

  keyup 192192 죽은

또한 타이핑이 아닌 입력 (예 : range <input type="range">)은 여전히 ​​누른 키에 따라 모든 키업, 키 다운 및 키 누르기 이벤트를 트리거합니다.