JS 屏蔽按键效果与改变按键效果的示例代码


在JavaScript中,屏蔽按键效果通常指的是阻止特定按键的默认行为,而改变按键效果则意味着当用户按下某个键时执行不同的操作。以下是一个简单的示例,展示了如何在使用`keydown`事件时屏蔽和改变按键效果。

### 屏蔽按键效果

以下代码展示了如何屏蔽`Enter`键的默认提交表单行为(假设这个`Enter`键是在一个表单内的输入字段中被按下的)。


<!DOCTYPE html>
<html>
<body>

<form id="myForm">
  <input type="text" id="myInput">
  <input type="submit" value="Submit">
</form>

<script>
  document.getElementById('myInput').addEventListener('keydown', function(event) {
    if (event.key === "Enter") {
      // 阻止Enter键的默认行为
      event.preventDefault();
      alert('Enter键的默认行为已被屏蔽');
    }
  });
</script>

</body>
</html>

### 改变按键效果

以下代码展示了当用户按下`A`键时,不是打印字符`A`,而是打印`Hello, World!`。


<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">

<script>
  document.getElementById('myInput').addEventListener('keydown', function(event) {
    if (event.key === "A") {
      // 阻止默认的按键行为
      event.preventDefault();
      
      // 改变按键效果:打印Hello, World!
      console.log('Hello, World!');
      
      // 可选:如果你想在输入框中显示不同的文本,可以使用以下方式
      // 但注意,这会改变用户输入的内容,可能不是最佳的用户体验
      // this.value += 'Hello, World!';
    }
  });
</script>

</body>
</html>

请注意,在第二个示例中,我注释掉了`this.value += 'Hello, World!';`这行代码,因为它会改变用户正在输入的文本,这通常不是改变按键效果时推荐的做法,除非这是你的特定需求。

以上代码展示了如何在JavaScript中通过监听`keydown`事件来屏蔽和改变按键效果。