如何限制文本框的输入，使其只接受数字和小数点？
限制输入到文本框：只允许数字和小数点
IT技术
javascript
html
2021-02-10 01:57:24
6个回答
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)"
type="text" name="txtChar">
</BODY>
</HTML>这真的有效！
接受的解决方案并不完整，因为您可以输入多个“.”，例如 24....22..22。通过一些小的修改，它将按预期工作：
<html>
<head>
<script type="text/javascript">
function isNumberKey(txt, evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode == 46) {
//Check if the text already contains the . character
if (txt.value.indexOf('.') === -1) {
return true;
} else {
return false;
}
} else {
if (charCode > 31 &&
(charCode < 48 || charCode > 57))
return false;
}
return true;
}
</script>
</head>
<body>
<input type="text" onkeypress="return isNumberKey(this, event);" />
</body>
</html>form.onsubmit = function(){
return textarea.value.match(/^\d+(\.\d+)?$/);
}
这是你要找的吗？
我希望它有帮助。
编辑：我编辑了上面的示例，以便只能有一个句点，前面至少有一位数字，后面至少有一位数字。
这是另一种解决方案，它允许使用十进制数并将小数点后的数字限制为小数点后两位。
function isNumberKey(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
return false;
else {
var len = $(element).val().length;
var index = $(element).val().indexOf('.');
if (index > 0 && charCode == 46) {
return false;
}
if (index > 0) {
var CharAfterdot = (len + 1) - index;
if (CharAfterdot > 3) {
return false;
}
}
}
return true;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="rate" placeholder="Billing Rate" required onkeypress="return isNumberKey(event,this)">此处介绍的所有解决方案都使用单键事件。这很容易出错，因为也可以使用复制'n'粘贴或拖放'n'drop 来提供输入。还有一些解决方案限制了非字符键的使用，例如ctrl+c，Pos1等。
我建议不要检查每个按键，而是检查结果是否符合您的期望。
var validNumber = new RegExp(/^\d*\.?\d*$/);
var lastValid = document.getElementById("test1").value;
function validateNumber(elem) {
if (validNumber.test(elem.value)) {
lastValid = elem.value;
} else {
elem.value = lastValid;
}
}<textarea id="test1" oninput="validateNumber(this);" ></textarea>该oninput事件在文本区域中的某些内容发生更改之后和呈现之前被触发。
您可以将 RegEx 扩展为您想要接受的任何数字格式。这比检查单个按键更易于维护和扩展。