HTML5-解決數值輸入框可以輸入字母"e"及"."問題

h5 tel input #javascript

璽安娜 2021-08-04 20:56:23 ‧ 685 瀏覽

分享至

<input id="phone" type="number" oninput="maxLengthCheck(this,4)">
<script>
function maxLengthCheck(object,max)
{
    object.value=object.value.toString().replace(/[^0-9]/g,'').slice(0, max);  
}
</script>

該input只允許輸入4碼數字，故設屬性為number，本想著可以少寫一些js驗證 (我就懶)
殊不知實測時發現竟可以輸入"e"及"."
原因是數學中 e=2.17828
"."在輸入的過程中確實有被取代掉，但若為最後一碼或是停止輸入則畫面上還是會出現小數點
故調整屬性為"tel"，測試後可達到原有目的
且若瀏覽器不支援tel屬性，將默認為"text"，亦可達成需求

參考文件:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/tel