您好,欢迎访问一九零五行业门户网

JavaScript限制输入框只允许整数和小数点(两种方法)

在上一篇文章《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;"> </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;"> </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基础教程》~欢迎大家学习~
以上就是javascript限制输入框只允许整数和小数点(两种方法)的详细内容。
其它类似信息

推荐信息