美文网首页
input 输入纯数字的完美解决办法

input 输入纯数字的完美解决办法

作者: 不再犹豫Debug | 来源:发表于2020-09-02 10:54 被阅读0次

    我们经常有input[type]=number输入纯数字的需求,可网上找的办法总是有点瑕疵。
    一般的方法大概都是兼容ios就加上 pattern="[0-9]*",然后再用oninput="value=value.replace(/\D/g, '')"
    但是上述方法还有瑕疵。

    ios在第三方中文输入法中输入+,-,=,*等字符时清空了整个input里的内容,而且还能输入.(点)

    为解决这个问题尝试过用onkeydown来判断keyCode,但是发现所有keyCode都是229,改成onkeyup,在安卓上可以,但是ios第三方中文输入法还是229.
    尝试过-wap-input-format,也不管用。
    一下方法,经过实验,是最完美的解决办法。

      <input id="test" type="number" pattern="[0-9]*" autocomplete="off" autocorrect="off" oninput="change(event)">
    
    <script>
      var a = '';
      function change(e) {
        if (!e.data && typeof (e.data) != 'undefined' && e.data != 0) { // 判断e.data为Null,及 删除
          a = document.getElementById('test').value;
        } else if (/[0-9]/.test(e.data)) { // 数字
          a = document.getElementById('test').value;
        }
        else { // 其他字符
          document.getElementById('test').value = ''
          document.getElementById('test').value = a
        }
      }
    </script>
    

    相关文章

      网友评论

          本文标题:input 输入纯数字的完美解决办法

          本文链接:https://www.haomeiwen.com/subject/krbisktx.html