首頁 > web前端 > js教程 > 在Chrome中模擬Keydown時,為什麼會註冊錯誤的金鑰?

在Chrome中模擬Keydown時,為什麼會註冊錯誤的金鑰?

Susan Sarandon
發布: 2024-10-18 13:16:30
原創
973 人瀏覽過

When Simulating Keydown in Chrome, Why Does the Wrong Key Get Registered?

Chrome 中的按鍵模擬正常觸發,但按鍵不正確

在 Chrome 中的文字區域元素上模擬按鍵事件對於自訂使用者互動至關重要。但是,某些嘗試可能會產生意外結果。

您嘗試使用 initKeyboardEvent 和所需的 keyCode 啟動 keydown 事件,但文字區域最終註冊了不正確的鍵值(Enter 而不是預期的字母)。另一種涉及屬性覆蓋的替代方法也被證明是不成功的。

要解決此問題,除了「keyCode」之外,您還需要覆寫「which」屬性。這是修改後的程式碼範例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

<code class="js">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

));

 

const Podium = {};

Podium.keydown = function(k) {

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

登入後複製

透過覆蓋“keyCode”和“which”,您可以確保在 keydown 事件期間註冊正確的鍵代碼和相應的鍵。這種方法修正了不正確的按鍵註冊問題,並允許準確的按鍵模擬。

以上是在Chrome中模擬Keydown時,為什麼會註冊錯誤的金鑰?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板