这篇文章给大家分享的是有关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如何限制输入框只允许整数和小数点”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。