onKeyPress vs. onKeyUp 및 onKeyDown

onKeyPress vs. onKeyUp 및 onKeyDown

이 세 가지 이벤트의 차이점은 무엇입니까?검색해보니 다음과 같습니다.

• onKeyDown사용자가 키를 누르면 이벤트가 트리거됩니다.
• onKeyUp이벤트는 사용자가 키를 놓으면 트리거됩니다.
• onKeyPress.onKeyDown에 어 followed가 붙는다.onKeyUp를 참조해 주세요.

두 가지는 않습니다.onKeyPress와와 the와 onKeyUp 수 있습니까?onKeyUp 않고( 를 누릅니다).onKeyDown

이거 좀 헷갈리는데, 누가 좀 정리해 주시겠어요?

★★★ KeyPress는 폐지되었습니다.사용하다KeyDown★★★★★★ 。

KeyPress,KeyUp ★★★★★★★★★★★★★★★★★」KeyDown는 각각.Click,MouseUp, ★★★★★★★★★★★★★★★★★」MouseDown.

1. Down 일어나다
2. Press second)
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 );
}

이 답변에서 원래 사용된 아카이브된 링크에 대해서는 여기를 참조하십시오.

이 링크에서:

이론상으로는onKeyDown ★★★★★★★★★★★★★★★★★」onKeyUp해제되는 을 나타내며, 는 키가 눌리거나 해제되는 것을 .onKeyPress입력되는 .event는 입력되는 문자입니다.이 이론의 구현이 모든 브라우저에서 동일한 것은 아닙니다.

인 문제보다는 인 것에 을 맞추고 , 실제적인 문제보다는 이론적인 문제에 을 맞추고 있고, 실제적인 문제보다는 이론적인 에 큰 가 있습니다 그리고 그 사이에는 몇 가지 큰 차이점이 있습니다.keyup ★★★★★★★★★★★★★★★★★」keypress적어도 파이어폭스(43에서 테스트)에서는 입력 필드 값과 관련되어 있습니다.

가 " " " 라고 한 경우1요소로 합니다.

1. 은 입력요소의 빈 값.keypress에 의한 변경

2. 은 력력음음음음음음음음음음음음음음 the the the the the the가 됩니다.1keyup핸들러

인라인 검증이나 자동 탭 작성 등 현재 값이 아닌 입력 후 새로운 값을 알고 있어야 하는 경우 이는 매우 중요합니다.

시나리오:

1. 가 " " 를 입력합니다.12345입력 요소로 변환합니다.
2. 를 선택합니다.12345.
3. 합니다.A.

?keypress 후 A에는 이제 A.

단,

1. Field은 Field.val()입니다.12345.
2. 는 $Field.val().length입니다.5
3. 사용자 선택이 빈 문자열입니다(선택 항목을 덮어쓰기하여 삭제된 항목을 결정할 수 없습니다).

따라서 브라우저(Firefox 43)는 사용자의 선택을 지우고 나서keypress이벤트, 필드 내용 업데이트, 실행keyup.

첫째, 그들은 다른 의미를 가지고 있다: 그들은 발사한다:

• Key Down – 키를 눌렀을 때
• KeyUp – 푸시된 버튼을 해제하고 입력/텍스트 영역 값을 갱신한 후(이 중 유일한 버튼)
• KeyPress – 둘 중 하나이며 실제로 키를 눌렀다 놓았다는 의미는 아닙니다(아래 참조).의미론적으로 일관성이 없을 뿐만 아니라 더 이상 사용되지 않기 때문에 사용하지 않는 것이 좋습니다(이 요약 참조).

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

• KeyPress는 , 화살표, /,PgDn /,end , 등을 무시하지만 KeyDown 및 KeyUp은 무시하지 않습니다(아래에 대한 자세한 내용은 참조).
• Windows에서 + 경유로 tab창을 전환하면 다른 이벤트보다 먼저 창 전환이 이루어지기 때문에 KeyDown만 실행됩니다(그리고 KeyDown은 적어도 Chrome 71에서는 시스템에 의해 차단됩니다).

, 이 점에 .event.keyCode (그리고)event.which)는 보통 KeyDown과 KeyUp의 값은 같지만 KeyPress의 값은 다릅니다.내가 만든 놀이터를 사용해봐.덧붙여서, 나는 꽤 이상한 것을 알아챘다: Chrome에서, 내가 +를 a눌렀을 때,input/textarea가 KeyPress를 사용하여 는 비어 있습니다.event.keyCode (그리고)event.which와 1 내용이 있지 하지 않습니다 (입력 내용이 비어 있지 않으면 전혀 기동하지 않습니다).

마지막으로 몇 가지 프래그매틱스가 있습니다.

• 화살표를 다룰 때는 onKeyDown을 사용해야 할 수도 있습니다.사용자가 를 누르고 있으면 KeyDown이 여러 번 실행됩니다(KeyUp은 버튼을 놓으면 한 번만 실행됩니다).또, KeyDown의 전파를 간단하게 막을 수 있지만, KeyUp의 전파를 막을 수 없는(또는 그렇게 쉽게 할 수 없는) 경우도 있습니다(예를 들어 텍스트필드에 줄 바꿈을 추가하지 않고 enter로 송신하는 경우).
• 때, 라고 .textareaKeyPress와 KeyDown 모두 여러 번 실행됩니다(Chrome 71, 여러 번 실행되는 이벤트가 필요한 경우 KeyDown을 사용하고 단일 키 릴리스의 경우 KeyUp을 사용합니다.
• KeyDown은 일반적으로 게임에 더 나은 반응을 제공해야 하는 경우에 적합합니다.
• esc 보통 KeyDown을 통해 처리됩니다.KeyPress는 기동하지 않고 KeyUp은 다음 기간 동안 다르게 동작합니다.input §textarea하다
• 텍스트 영역의 높이를 콘텐츠에 맞게 조정하려면 onKeyDown이 아니라 onKeyPress를 사용합니다(PS OK, 이 경우 실제로 onChange를 사용하는 것이 좋습니다).

( 다음과 같은 .input ★★★★★★★★★★★★★★★★★」change(이벤트의 경우)

onkeydown때 등됩니다.Ctrl+A,Ctrl 'down' 입니다.

onkeyup키가 해방되었을 때(수식자/etc 키 포함)가 기동됩니다.

onkeypress 조합하여 발사하다onkeydown ★★★★★★★★★★★★★★★★★」onkeyup반복에 반복할 때).onkeyup가 시험해본이 없는 것이다(이 반복적인 행동은 제가 테스트해 본 적이 없는 것입니다.테스트를 할 경우 코멘트를 추가해 주세요!)

textInput( 한정 (Webkit 「」 「Webkit」등의 Shift+A를 입력하지만 'A'는 입력하지 않습니다.Ctrl+A텍스트는 선택하고 텍스트 입력은 입력하지 않습니다.

Jan Wolter의 이 기사는 제가 접한 것 중 최고의 작품입니다.링크가 끊어지면 아카이브된 복사본을 여기서 찾을 수 있습니다.

모든 브라우저의 주요 이벤트를 잘 설명해 줍니다.

키를 누르면 Keydown 이벤트가 발생하고 바로 Key press 이벤트가 발생합니다.키를 놓으면 키업 이벤트가 생성됩니다.

키다운과 키 누르기의 차이를 이해하려면 문자와 키를 구분하는 것이 좋습니다.키는 컴퓨터 키보드의 실제 버튼입니다.문자는 버튼을 눌러 입력하는 기호입니다.미국 키보드에서 키를 누른 상태에서 키를 누르면 일반적으로 "달러 기호" 문자가 생성됩니다.이것은 전 세계 모든 키보드의 경우는 아닙니다.이론적으로, 키 다운 및 키 업 이벤트는 누르거나 해제된 키를 나타내며, 키 누르기 이벤트는 입력된 문자를 나타냅니다.실제로는, 이것이 항상 실장되는 방법은 아닙니다.

잠시 동안 일부 브라우저는 키를 누른 직후 textInput이라는 추가 이벤트를 발생시켰습니다.초기 버전의 DOM 3 표준에서는 키 누르기 이벤트를 대체하기 위해 이 기능을 사용하려고 했지만 나중에 전체 개념이 취소되었습니다.버전 525와 533 사이에서 Webkit이 이것을 서포트하고 있어 IE가 서포트하고 있다고 들었습니다만, Webkit가 그것을 textInput이라고 부르고 IE가 textinput이라고 부르고 있었기 때문에, 저는 그것을 검출하지 못했습니다.

모든 브라우저에서 지원되는 입력이라는 이벤트도 있으며 텍스트 영역 또는 입력 필드를 변경한 직후에 실행됩니다.일반적으로 키를 누르면 입력된 문자가 텍스트 영역에 나타나고 입력이 실행됩니다.입력 이벤트는 실제로 입력된 키에 대한 정보를 제공하지 않습니다. 변경된 내용을 확인하려면 텍스트 상자를 검사해야 합니다. 따라서 이 이벤트를 주요 이벤트로 간주하지 않고 여기에 기록하지도 않습니다.원래는 텍스트 영역이나 입력 상자만을 대상으로 하고 있습니다만, 다른 종류의 오브젝트에 대해서도 일반화하는 움직임이 있다고 생각합니다.

키 누르기와 키 누르기는 동일한 것으로 보입니다(위에서 언급한 바로 가기 키의 작은 차이).

다음과 같이 시험해 보십시오.

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

키를 눌렀을 때가 아니라 키를 눌렀을 때 이벤트 온키 누름과 온키 다운이 모두 트리거된다는 것을 알 수 있습니다.

차이점은 이벤트가 한 번이 아니라 여러 번 트리거된다는 것입니다(키를 누른 채로 있으면).그것을 인식하고 적절히 대응해 주세요.

갱신된 답변:

키다운

• 키를 누른 상태에서 여러 번 실행됩니다.
• 메타 키를 기동합니다.

키 누르기

• 키를 누른 상태에서 여러 번 실행됩니다.
• 메타 키를 기동하지 않습니다.

키업

• 키를 놓으면 마지막에 한 번 실행됩니다.
• 메타 키를 기동합니다.

이것은, 양쪽 모두의 동작입니다.addEventListener ★★★★★★★★★★★★★★★★★」jQuery.

https://jsbin.com/vebaholamu/1/edit?js,console,output <--try 예시

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

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

궁금해서 그러는데

JS 메서드를 활성화하기 위해 onkeydown 이벤트를 사용할 때 해당 이벤트의 문자 코드가 onkey press로 표시되는 문자 코드와 다릅니다.

예를 들어 numpad 키는 onkey press를 사용할 때 문자 키 위에 있는 숫자 키와 동일한 문자 코드를 반환하지만 onkeydown을 사용할 때는 반환되지 않습니다.

keydown을 사용할 때 특정 문자를 체크한 스크립트가 실패한 이유를 알아내는 데 몇 초가 걸렸습니다.

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

네, 그렇습니다.방법의 정의가 다르다는 것은 알고 있습니다.그러나 매우 혼란스러운 점은 두 방법 모두 이벤트 결과를 이벤트를 사용하여 검색한다는 것입니다.키코드..같은 값을 반환하지 않습니다.그다지 선언적인 구현은 아닙니다.

기본적으로 이러한 이벤트는 브라우저 유형과 버전에 따라 다르게 동작합니다. jsBin 테스트를 작성했습니다. 대상 환경에서 이러한 이벤트가 어떻게 동작하는지 콘솔에서 확인할 수 있습니다. 도움이 되길 바랍니다.http://jsbin.com/zipivadu/10/edit

처리할 이벤트를 결정하는 데 도움이 될 수 있는 몇 가지 실용적인 사실(아래 스크립트를 실행하고 입력란에 초점을 맞춥니다)

$('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/>

누름:

• 비삽입/비삽입 키(예: )가 트리거되지 않습니다.keypress. 눌렀다 놓는다:

  키다운 17 17 컨트롤

  키업 17 17 컨트롤

• 다른 문자에 문자 변환을 적용하는 키보드의 키는 데드(Dead)로 이어질 수 있으며 키(예: )가 중복될 수 있습니다.keydown눌렀다 놓으면 더블이 표시됩니다.´´:

  키다운 192 데드

  키다운 192 192''

  180' 키를 누르다

  180' 키를 누르다

  키업 192 데드

입력 범위 한, 타예예예예(예: 범: 예범))<input type="range">)는 누른 키에 따라 모든 키 업, 키 다운 및 키 누르기 이벤트를 트리거합니다.

블레이저...

어떤 키를 눌렀는지 확인하려면 onkey press OR keydown을 사용하되 텍스트 필드에서 텍스트를 가져온 다음 마지막으로 누른 키를 확인하려면(예: ENTER 키를 스캔 중이고 ENTER 키를 눌렀을 때에도 를 실행하려면(거의 모든 바코드 스캐너가 마지막에 13 "ENTER"를 전송함) 다른 키를 사용해야 합니다).e 텍스트 필드에 텍스트를 입력할 수 없습니다.

예를들면

<input type="text" class="form-control" @control" @onkeyup="BarCodeScan" 자리 표시자="Scan" />

코드를 입력하여 Enter 키를 누르거나 스캐너에서 스캔하면 BarCodeScan 기능이 자동으로 호출됩니다.여기서 "onkeypress" 또는 "onkeydown"을 사용하는 경우 바인딩이 수행되지 않고 텍스트 필드에서 텍스트를 가져올 수 없습니다.

키업과 키다운의 차이점을 발견한 것은

키다운 이벤트에 이벤트 핸들러를 첨부하고 입력 상자 값(예: target.value)을 기록하면 키다운이벤트 이전의 값이 무엇이든 반환됩니다.

그러나 키업 이벤트에 대한 이벤트 핸들러를 첨부하고 입력 상자 값을 기록하면 누른 키를 포함한 최신 값이 반환됩니다.

예를 들어 이해합시다

  


   


    
// the latest keypressed is not shown in e.target.value
// when keydown event handler is executed
// since until the keyup is not triggered 
// the input box will not have that character in its value
const searchCitiesEleKeyDown = document.querySelector("#searchCities");
searchCitiesEleKeyDown.addEventListener("keydown", (e) => {
  console.log(e.target.value);
});


// but in case of keyup event the e.target.value prints 
// the text box content with the latest character pressed
// since as soon as the keyup event triggers
// the input box will have that character pressed in its value
const searchCitiesEleKeyUp = document.querySelector("#searchCities");
searchCitiesEleKeyUp.addEventListener("keyup", (e) => {
  console.log(e.target.value);
});

    
<input type="text" id="searchCities" />

   

  

CodeSandbox 링크 https://codesandbox.io/s/keydown-vs-keyup-wpj33m

언급URL : https://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown