KeyboardEvent。键码弃用。这在实践中意味着什么?

根据MDN，我们绝对不应该使用. keycode属性。已弃用:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

在W3学校，这个事实被淡化了，只有一个边注说。keycode只是为了兼容性而提供的，最新版本的DOM事件规范建议使用.key属性。

问题是浏览器不支持.key，那么我们应该使用什么呢?我遗漏了什么吗?

当前回答

MDN已经提供了一个解决方案:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

2016-02-14 17:55:47

其他回答

MDN已经提供了一个解决方案:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

2016-02-14 17:55:47

你有三种方法来处理它，因为它写在你分享的链接上。

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

你应该考虑它们，如果你想要跨浏览器支持，这是正确的方法。

如果你实现这样的东西，它会更容易。

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

2016-02-14 17:59:03

你可以使用

parseInt(event.key, radix: 10)

2020-12-08 06:03:18

e.charCode已弃用:

<input
  onChange={(e) => setToken(e.target.value)}
  type="text"
  value={token}
  onKeyPress={(e) => {
    if (e.charCode === 13) {
      verifyLoginF()
    }
  }}
/>

你应该用现在:e。键=== 'Enter'

2021-08-28 23:56:29

使用onkeypress和onkeydown事件。,它是开关[字符码]或[键码]

function myKey(event){ var keycode = event.keyCode; //key code variant 1, not recomendate var keywhic = event.which; //key code variant 2, nice worked var unicode = event.key; //string name code, nice worked var chacode = event.charCode; //works onkeypress="myKey(event)" var metakey = event.metaKey; //true false, winKey or macComand document.getElementById("demo").innerHTML = keycode+" "+keywhic+" "+unicode+" "+chacode+" "+metakey; } <!DOCTYPE html> <html> <body onkeydown="myKey(event)">  <h1 id="demo">Keyboard Buttons click me and test the keyboard</h1> <script> //function myKey(event){ //paste code //} </script> </body> </html>

2022-08-21 04:45:59

KeyboardEvent。键码弃用。这在实践中意味着什么?

推荐文章

最新文章

标签