JavaScript限制输入框只允许整数和小数点（两种方法）
- 藏色散人原创
- 2021-08-26 14:22:504265浏览
在上一篇文章《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基础教程》~欢迎大家学习~
以上是JavaScript限制输入框只允许整数和小数点（两种方法）的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn