input 輸入純數(shù)字的完美解決辦法

我們經(jīng)常有input[type]=number輸入純數(shù)字的需求,可網(wǎng)上找的辦法總是有點(diǎn)瑕疵。
一般的方法大概都是兼容ios就加上 pattern="[0-9]*",然后再用oninput="value=value.replace(/\D/g, '')"
但是上述方法還有瑕疵。

ios在第三方中文輸入法中輸入+,-,=,*等字符時(shí)清空了整個(gè)input里的內(nèi)容,而且還能輸入.(點(diǎn))

為解決這個(gè)問(wèn)題嘗試過(guò)用onkeydown來(lái)判斷keyCode,但是發(fā)現(xiàn)所有keyCode都是229,改成onkeyup,在安卓上可以,但是ios第三方中文輸入法還是229.
嘗試過(guò)-wap-input-format,也不管用。
一下方法,經(jīng)過(guò)實(shí)驗(yàn),是最完美的解決辦法。

  <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)) { // 數(shù)字
      a = document.getElementById('test').value;
    }
    else { // 其他字符
      document.getElementById('test').value = ''
      document.getElementById('test').value = a
    }
  }
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容