올바른 키 값을 사용하여 Chrome에서 Keydown 이벤트 시뮬레이션
HTML 페이지 요소에서 keydown 이벤트를 시뮬레이션하면 특히 문제가 발생할 때 몇 가지 문제가 발생할 수 있습니다. Chrome에서 올바른 키 코드 값을 설정하는 방법. 이 문제를 해결하기 위해 "which" 속성을 효과적으로 재정의하고 원하는 키 코드 시뮬레이션을 허용하는 솔루션을 탐구할 것입니다.
초기 코드 및 제한 사항
초기 코드는 document.createEvent('KeyboardEvent')를 사용하고 키 코드를 포함한 다양한 매개변수를 설정하여 "keydown" 이벤트를 시뮬레이션하려고 시도했습니다. 그러나 텍스트 영역 요소가 의도한 문자 "m"(키 코드 77) 대신 "Enter" 키 코드(13)를 수신하여 결과가 정확하지 않았습니다.
"which" 속성 재정의
이 문제를 해결하려면 키 코드를 지정하는 대체 방법을 제공하는 "which" 속성을 재정의해야 합니다. 다음은 이 수정 사항을 통합한 예제 코드입니다.
<code class="javascript">document.addEventListener('keydown', e => console.log( 'altKey : ' + e.altKey + '\n' + 'charCode (Deprecated) : ' + e.charCode + '\n' + 'code : ' + e.code + '\n' + 'ctrlKey : ' + e.ctrlKey + '\n' + 'isComposing : ' + e.isComposing + '\n' + 'key : ' + e.key + '\n' + 'keyCode (Deprecated) : ' + e.keyCode + '\n' + 'location : ' + e.location + '\n' + 'metaKey : ' + e.metaKey + '\n' + 'repeat : ' + e.repeat + '\n' + 'shiftKey : ' + e.shiftKey + '\n' + 'which (Deprecated) : ' + e.which + '\n' + 'isTrusted : ' + e.isTrusted + '\n' + 'type : ' + e.type )); Podium = {}; Podium.keydown = function(k) { var oEvent = document.createEvent('KeyboardEvent'); // Chromium Hack Object.defineProperty( oEvent, 'keyCode', { get : function() { return this.keyCodeVal; } } ); Object.defineProperty( oEvent, 'which', { get : function() { return this.keyCodeVal; } } ); if (oEvent.initKeyboardEvent) { oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k); } else { oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0); } oEvent.keyCodeVal = k; if (oEvent.keyCode !== k) { alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")"); } document.dispatchEvent(oEvent); } //Sample usage Podium.keydown(65);</code>
코드의 주요 기능:
사용법:
문자 "a"(키 코드 65)에 대한 keydown 이벤트를 시뮬레이션하려면 Podium.keydown(65)을 호출하면 됩니다.
결론:
"which" 속성을 재정의함으로써 올바른 키 코드 값을 사용하여 Chrome에서 키다운 이벤트를 효과적으로 시뮬레이션할 수 있습니다. 이 방법을 사용하면 의도한 대로 텍스트 영역 요소 및 입력 데이터와 정확하게 상호 작용할 수 있습니다.
위 내용은 올바른 키 값을 사용하여 Chrome에서 키다운 이벤트를 효과적으로 시뮬레이션하기 위해 'which' 속성을 재정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!