本文的主题内容则是教大家如何用javascript实现限制输入框只允许整数和小数点,而不允许使用任何其他符号。
下面我给大家介绍两种实现方法:
第一种方法:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body style="text-align:center;" id="body"> <h1 id="h1" style="color:Idff311f;"> 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: Idff311f; "> </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限制输入框只允许整数和小数点(两种方法)的详细内容,更多请关注php中文网其它相关文章!