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

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

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

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

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

当前回答

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

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

其他回答

使用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

这里建议使用key value而不是keyCode，如果失败，则使用keyCode。但是这还不够，因为这个属性中的值是不兼容的。事情是new key包含控制键的字符串，比如:ArrowUp，但keyCode只包含简单的代码

String.fromCharCode(event.keyCode)

将导致不可打印的字符。下面是可打印字符的解决方案:

element.keydown((event) => {
    var symbolPressed;
    //cross browser
    if (event.key !== undefined) {
        symbolPressed = event.key; //Here control characters represented as String like: ArrowUp
        if (symbolPressed.length > 1) return; //filter out control characters
    } else if (event.keyCode !== undefined) {
        symbolPressed = String.fromCharCode(event.keyCode); //Here control chars represented as one char string
    }
    //Update this regex if you need other characters
    if (!symbolPressed.match(/[A-z0-9\s]/)) return;
    console.log(symbolPressed);
});

如果需要不可打印的控制字符，则必须相应地更新条件和正则表达式。

2021-05-28 13:49:28

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

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

推荐文章

最新文章

标签