input 框禁止输入非数字和小数点以外的字符（两种思路和方法）

最新推荐文章于 2024-06-13 10:45:00 发布

zhangpaopao0609

最新推荐文章于 2024-06-13 10:45:00 发布

阅读量6.8k

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41800366/article/details/106374355

版权

JS 专栏收录该内容

42 篇文章 3 订阅

订阅专栏

要实现 input 框禁止输入非数字和小数点以外的字符，一共有两种思路:

利用input事件和正则，输入非数字和小数点以外的字符时，直接替换为空
利用keydown事件和阻止默认事件，输入非数字和小数点以外的字符时，直接禁止输入

下面就来实现上述两种方法，为了让更多的同学能够明白，看懂，因此我这里没有使用框架，直接采用原生的 js（好久没写，生疏了）

input事件和正则

<body>
    <div>
      <input type="text" oninput="inputNumber(this)">
    </div>
    <script>
      function inputNumber(e) {
        e.value = e.value.replace(/[^0-9.]/g,"")  // 不可输入数字和小数点以外的
      }
    </script>
</body>

keydown事件和阻止默认事件

<body>
    <div>
      <input type="text" id="input_">
    </div>
    <script>
      let input_ = document.getElementById("input_");
      input_.onkeydown = function(e) {
        let _code =  e.keyCode 
        if ( (_code < 48 || _code > 57) && _code != 190 && _code != 8){
          // 输入 除数字 小数点 删除键 以外的均阻止
          e.preventDefault();
        }
      }
    </script>
</body>