无法在 JavaScript 中检索 Android 设备上键盘事件的键码-解网

问：

标题：event.keyCode 在 JavaScript 中无法在 Android 设备上使用可编辑<div>

描述：我遇到了一个问题，该属性在 Android 设备上的 JavaScript 中无法按预期工作，特别是在可编辑的 .我有一个依赖于捕获键盘输入的应用程序，特别是在使用可编辑的 .以下是我问题的详细信息：event.keyCode<div><div>

问题描述：

我有一个带有 JavaScript 的 HTML 页面，可以在可编辑的中捕获键盘事件，它在桌面和 iOS 浏览器上运行良好。<div>
但是，在 Android 设备上，该属性不会为可编辑的 .event.keyCode<div>

示例代码：以下是我正在使用的代码的简化示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Editable DIV Example</title>
  </head>
  <body>
    <div
      id="editable-div"
      contenteditable="true"
      style="border: 1px solid #000; padding: 10px"
    >
      Start typing here...
    </div>
    <div class="event-container">
      <div class="event-label">Keydown Event:</div>
      <div id="keydownValue" class="event-value" title="Keydown Event"></div>
    </div>
    <div class="event-container">
      <div class="event-label">Keyup Event:</div>
      <div id="keyupValue" class="event-value" title="Keyup Event"></div>
    </div>
    <div class="event-container">
      <div class="event-label">Keypress Event:</div>
      <div id="keypressValue" class="event-value" title="Keypress Event"></div>
    </div>
    <div class="event-container">
      <div class="event-label">Input Event:</div>
      <div id="inputValue" class="event-value" title="Input Event"></div>
    </div>
    <script>
      const editableDiv = document.getElementById('editable-div');
      const keydownValueDiv = document.getElementById('keydownValue');
      const keyupValueDiv = document.getElementById('keyupValue');
      const keypressValueDiv = document.getElementById('keypressValue');
      const inputValueDiv = document.getElementById('inputValue');

      editableDiv.addEventListener('keydown', function (event) {
        const key = event.key; // Get the pressed key as a string
        const keyCode = event.code; // Get the key code

        // Update the keydownValueDiv content
        keydownValueDiv.textContent = 'Key: ' + key + ', KeyCode: ' + keyCode;
      });

      editableDiv.addEventListener('keyup', function (event) {
        const key = event.key; // Get the pressed key as a string
        const keyCode = event.code; // Get the key code

        // Update the keyupValueDiv content
        keyupValueDiv.textContent = 'Key: ' + key + ', KeyCode: ' + keyCode;
      });

      editableDiv.addEventListener('keypress', function (event) {
        const key = event.key; // Get the pressed key as a string
        const keyCode = event.keyCode; // Get the deprecated keyCode

        // Update the keypressValueDiv content
        keypressValueDiv.textContent = 'Key: ' + key + ', KeyCode: ' + keyCode;
      });

      editableDiv.addEventListener('input', function (event) {
        const key = event.key; // Get the pressed key as a string
        const keyCode = event.keyCode; // Get the deprecated keyCode

        // Update the inputValueDiv content
        inputValueDiv.textContent = 'Key: ' + key + ', KeyCode: ' + keyCode;
      });
    </script>
  </body>
</html>

示例：https://stackblitz.com/edit/js-zqxbij?file=index.html

Android上的实际行为：

在 Android 设备上，在可编辑的中，该属性无法按预期工作，并且不提供键代码，并且仅为所有键提供 229。<div>event.keyCode

其他信息：

我还尝试使用 event.key 和 event.code 作为替代方案，但这些属性在 Android 设备上也无法按预期工作。问题仍然存在，我正在寻找一种适用于更广泛的设备和浏览器的解决方案。

问题：

有没有一种可靠的方法可以在使用 JavaScript 的 Android 设备上捕获关键代码，考虑到这些设备上的问题，特别是在可编辑的设备上？event.keyCode<div>

我将不胜感激解决此问题的任何见解或解决方案。先谢谢你！

预期行为：

在 Android 浏览器上，此代码在可编辑的 .<div>

JavaScript HTML TypeScript 事件

无法在 JavaScript 中检索 Android 设备上键盘事件的键码

Unable to retrieve the keycode of keyboard events on an Android device in JavaScript

评论