올바른 키 값을 사용하여 Chrome에서 키다운 이벤트를 효과적으로 시뮬레이션하기 위해 \'which\' 속성을 재정의하는 방법은 무엇입니까?

올바른 키 값을 사용하여 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>

코드의 주요 기능:

• "keydown" 이벤트 리스너가 문서에 추가됩니다. .
• Podium.keydown() 함수는 KeyboardEvent 객체를 생성하고 "keyCode" 및 "which" 속성을 재정의하여 올바른 키 코드 값을 보장합니다.
• 그런 다음 initKeyboardEvent를 사용하여 KeyboardEvent를 초기화합니다. () 또는 initKeyEvent()는 브라우저 지원에 따라 달라집니다.
• "keyCodeVal" 속성은 원하는 키 코드 값으로 설정됩니다.
• 이벤트가 문서로 전달됩니다.

사용법:

문자 "a"(키 코드 65)에 대한 keydown 이벤트를 시뮬레이션하려면 Podium.keydown(65)을 호출하면 됩니다.

결론:

"which" 속성을 재정의함으로써 올바른 키 코드 값을 사용하여 Chrome에서 키다운 이벤트를 효과적으로 시뮬레이션할 수 있습니다. 이 방법을 사용하면 의도한 대로 텍스트 영역 요소 및 입력 데이터와 정확하게 상호 작용할 수 있습니다.

위 내용은 올바른 키 값을 사용하여 Chrome에서 키다운 이벤트를 효과적으로 시뮬레이션하기 위해 \'which\' 속성을 재정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!