站长资讯网在上一篇文章《JavaScript如何实现点击删除扩展名并获取文件名》中给大家介绍了怎么通过javascript实现点击删除扩展名并获取文件名，有需要的朋友可以去阅读了解一下~
本文的主题内容则是教大家如何用javascript实现限制输入框只允许整数和小数点，而不允许使用任何其他符号。
下面我给大家介绍两种实现方法：
第一种方法：
<!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中文网 </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中文网 </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>
运行结果如下：
在上述代码示例中：
-
每次输入一个字符时，都会检查这个字符是否有效。
-
这个例子也是检查输入的小数位数，一个不能输入2个小数。
-
如果字符有效，则添加到输入中，否则无效。
最后给大家推荐《JavaScript基础教程》~欢迎大家学习~
