JavaScript如何限制输入框只允许整数和小数点
JavaScript如何限制输入框只允许整数和小数点
发布时间：2021-08-26 14:34:26 来源：高防服务器网 阅读：110 作者：小新 栏目：web开发
这篇文章给大家分享的是有关JavaScript如何限制输入框只允许整数和小数点的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
第一种方法：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body style="text-align:center;" id="body"> <h2 id="h2" style="color:#ff311f;"> 高防服务器网 </h2> <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"> <h2 id="h2" style="color:orange;"> 高防服务器网 </h2> <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如何限制输入框只允许整数和小数点”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[