改变 JavaScript 中某些按键的按键事件

Question

我正在开发一个项目，该项目显示在文本框中按下的每个键的字符代码。

我的问题是，当按下某些键时，即：Shift、Backspace、Space，它们的字符代码显示为：16、8、32。

我希望这些键在按下时保持其正常行为。因此，该空格会导致文本框中出现空格，退格键会删除该字符，依此类推...但其余键将继续输出其字符代码。

我怎样才能实现这个目标？

Answer 1

您只需检查钥匙并进行相应处理即可。这是一个演示：

document.getElementById("test-textbox").addEventListener("keypress", function(event) {
    var code = event.keyCode || event.which;
  
    if(code === 16 || code === 8 || code === 32) //check if space, shift, or backspace
        return; //if yes, allow
    
    console.log(code); //if not, log value  
    event.preventDefault(); //prevent entry
});

<input type="text" id="test-textbox">

这将允许按下 Shift、退格键和空格键，但所有其他键都将被记录。

Answer 2

我认为这对你有用。

var elementID = document.getElementById('elementID');

elementID.onkeydown = function(event) {
    var key = event.keyCode || event.charCode;

    if( key == 32 || key == 8 )
        event.preventDefault();
};

Answer 3

只要你...

1. 不要调用事件对象上的

   preventDefault

   方法，并且
2. 不要从事件处理程序返回

   false

…你应该没事。

特别是处理程序……

function showCharCode(event) {
  // NOTE: Don’t call `event.preventDefault()` here.
  document.querySelector('.char-code').textContent = event.charCode;
  // NOTE: Don't return false here.
}

...仍会将事件传播到默认文本框（或输入或内容可编辑）元素。

Answer 4

  document.body.addEventListener("keydown", (event) => {
        if (event.key === "Enter") {
          const text = document.querySelector("input").value;
          console.log(`your name: ${text}`);
        }
      });