js在输入框屏蔽按键,只能键入数字的示例代码


在JavaScript中,要实现一个输入框(如``)只接受数字键入的功能,你可以通过监听键盘的`keypress`或`keydown`事件,并阻止非数字键的默认行为来实现。以下是一个简单的示例代码:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Only Numbers Input</title>
<script>
  // 等待文档加载完毕
  document.addEventListener('DOMContentLoaded', function() {
    // 获取输入框元素
    var input = document.getElementById('numberOnlyInput');

    // 为输入框添加keydown事件监听器
    input.addEventListener('keydown', function(event) {
      // 获取按键的ASCII码
      var keyCode = event.which || event.keyCode;

      // 检查按键是否是数字(包括0-9和小键盘上的数字)
      // 注意:这里也允许退格键(Backspace, keyCode 8)和删除键(Delete, keyCode 46)
      // 以及方向键(用于处理光标移动)
      if (!(
          (keyCode >= 48 && keyCode <= 57) || // 主键盘区的数字0-9
          (keyCode >= 96 && keyCode <= 105) || // 小键盘区的数字0-9
          keyCode === 8 || // 退格键Backspace
          keyCode === 46 || // 删除键Delete
          // 可以添加更多的特殊键,如Tab、Ctrl等,如果需要的话
          (keyCode >= 35 && keyCode <= 40) // 方向键
        )) {
        // 阻止非数字键的默认行为
        event.preventDefault();
      }
    });
  });
</script>
</head>
<body>
  <!-- 创建一个输入框 -->
  <input type="text" id="numberOnlyInput" placeholder="只能输入数字">
</body>
</html>

这段代码通过监听`keydown`事件来检查按键的ASCII码,然后判断该按键是否为数字键、退格键、删除键或方向键(可选)。如果不是这些允许的按键,则通过调用`event.preventDefault()`来阻止按键的默认行为,从而实现在输入框中只能键入数字的效果。

请注意,这个示例也允许退格键和删除键,以便用户可以编辑他们的输入。同时,我还添加了对方向键的支持(作为示例,你可能不需要这个),你可以根据需要调整这部分逻辑。