站長資訊網(wǎng)在上一篇文章《JavaScript如何實現(xiàn)點擊刪除擴展名并獲取文件名》中給大家介紹了怎么通過javascript實現(xiàn)點擊刪除擴展名并獲取文件名，有需要的朋友可以去閱讀了解一下~
本文的主題內容則是教大家如何用javascript實現(xiàn)限制輸入框只允許整數(shù)和小數(shù)點，而不允許使用任何其他符號。
下面我給大家介紹兩種實現(xiàn)方法：
第一種方法：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body style="text-align:center;" id="body"> <h1 id="h1" style="color:#ff311f;"> PHP中文網(wǎng) </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p> <form> 請輸入內容: <input id="input" oninput="valid(this)" type="text"> </form> <br> <p id="GFG_DOWN" style="font-size: 23px; font-weight: bold; color: #ff311f; "> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "查看輸入是否有效"; var RegExp = new RegExp(/^d*.?d*$/); var val = document.getElementById("input").value; function valid(elem) { if (RegExp.test(elem.value)) { val = elem.value; el_down.innerHTML = "輸入的是有效字符"; } else { elem.value = val; el_down.innerHTML = "輸入的是無效字符"; } } </script> </body> </html>
運行結果如下：
在上述代碼示例中：
-
RegExp用于驗證輸入。
-
每次輸入一個字符時，整個輸入都會與 RegExp 匹配以檢查有效性。
-
如果有效，則使字符有效并添加到輸入中，否則無效。
第二種方法：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body style="text-align:center;" id="body"> <h1 id="h1" style="color:orange;"> PHP中文網(wǎng) </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p> <form> 請輸入內容: <input id="input" onkeypress="return GFG_Fun(this, event)" type="text"> </form> <br> <p id="GFG_DOWN" style="font-size: 23px; font-weight: bold; color: orange; "> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "查看輸入是否有效"; function isValid(el, evnt) { var charC = (evnt.which) ? evnt.which : evnt.keyCode; if (charC == 46) { if (el.value.indexOf('.') === -1) { return true; } else { return false; } } else { if (charC > 31 && (charC < 48 || charC > 57)) return false; } return true; } function GFG_Fun(t, evnt) { var a = isValid(t, evnt); if (a) { el_down.innerHTML = "輸入的是有效字符"; } else { el_down.innerHTML = "輸入的是無效字符"; } return a; } </script> </body> </html>
運行結果如下：
在上述代碼示例中：
-
每次輸入一個字符時，都會檢查這個字符是否有效。
-
這個例子也是檢查輸入的小數(shù)位數(shù)，一個不能輸入2個小數(shù)。
-
如果字符有效，則添加到輸入中，否則無效。
最后給大家推薦《JavaScript基礎教程》~歡迎大家學習~
