我该如何限制文本框的输入，以使其仅接受数字和小数点？
限制文本框输入：仅允许数字和小数点。
124
- Ayyappan Anbalagan
1
我知道你指定了一个文本框，但为什么不使用type="number"呢？这样可以解决你大部分的问题。然后使用一些CSS来隐藏上下的微调按钮。另外，还可以使用一些jQuery来阻止剪切和粘贴。我可以给出一个答案，但已经有30个答案了，而且我可能会因为没有具体回答问题而被投票否决。有时候，我觉得答案在于采用不同的方法。 - undefined
33个回答
171
<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>这真的很有效！
- rebisco
15
2字符31是单元分隔符代码。基本上数字和文本在32及以上之间。该代码读取应该输入的字符代码不是十进制且高于31（单元分隔符），但低于48（数字零）或高于57（数字九）时，不接受它。 - Paul Williams
9如果(charCode == 46 && evt.srcElement.value.split('.').length>1)，
那么将返回false，这将防止多个“.”的出现。 :) - Anish Karunakaran
11包括数字键盘和句点：
&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)。 - mga1当用户直接将字符串粘贴到文本框中时，它无法正常工作。 - Mohammed Dawood Ansari
2我可以在这个字段中粘贴非数字字符，有没有任何解决方法？ - Uday Shankar
显示剩余10条评论
39
所接受的解决方案不完整，因为您可以输入多个'.'，例如 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>- Hassan Mokdad
5
我使用了你的答案，但我修改了这个onkeypress="return isNumberKey(this,event);"。 - Bilbo Baggins
是的，我认为输入事件参数是可选的，因为它可以适用于两种情况。谢谢。 - Hassan Mokdad
节省了我们几个按键。谢谢！ - Irf
3这个的唯一问题是你可以复制粘贴文本。在输入元素中添加
ondrop="return false;" onpaste="return false;" oncontextmenu="return false;" 就足够了。 - clamchoda阻止用户使用拖放或复制粘贴是对每个用户的不良服务。 - Hubert Grzeskowiak
30
form.onsubmit = function(){
return textarea.value.match(/^\d+(\.\d+)?$/);
}
这是你要找的内容吗？
希望能对你有所帮助。
编辑：我修改了上面的示例，以便只能有一个句点，前面至少有一个数字，后面至少有一个数字。
- tau
3
1想必这也会验证 '99.23.65.86' ....
但我猜问题是关于使用单个点验证 '56987.32' ..... - SpikETidE
我看到海报已经编辑了他/她的原始问题。感谢更新！ - tau
1我最好使用 /^\d+([.,]\d+)?$/ 来支持国际数字（其中逗号代替点）。 - FDIM
23
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)">- Kurenai Kunai
6
几乎完美了..你的
if语句的最后一个条件缺少大写字母"C"。 - DNKROZ漂亮的解决方案！！ - Michael Murray
很漂亮。对我来说完美无缺。 - Noor Ahmed
请注意，此解决方案允许在文本粘贴或拖放到字段时使用多个点（“.”）、破折号（“-”）和字母“e”。在Chrome中，默认情况下，HTML元素还将显示两个箭头，用于递增和递减数字。递减按钮允许数字降至零以下。 - Hubert Grzeskowiak
如果您已经放置了两个小数点，这个解决方案将不允许在左侧输入任何内容，同时您还需要处理粘贴。 - Farhan ALi
完美运行。谢谢伙计。 :) - Ashwani Shukla
17
这里提供的所有解决方案都使用单个按键事件。这种方法非常容易出错，因为输入也可以通过复制粘贴或拖放来完成。另外，一些解决方案限制了非字符键的使用，如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以接受任何数字格式。 这比检查单个按键要可维护和可扩展得多。
- Hubert Grzeskowiak
1
这是最优雅的解决方案！ - jkd
4
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.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>
- lak-b
4
只需要在Jquery中应用此方法，您就可以验证您的文本框仅接受带有小数的数字。
function IsFloatOnly(element) {
var value = $(element).val();
var regExp ="^\\d+(\\.\\d+)?$";
return value.match(regExp);
}
- Jitender Kumar
2
这里是一段可以帮助你的脚本：
<script type="text/javascript">
// price text-box allow numeric and allow 2 decimal points only
function extractNumber(obj, decimalPlaces, allowNegative)
{
var temp = obj.value;
// avoid changing things if already formatted correctly
var reg0Str = '[0-9]*';
if (decimalPlaces > 0) {
reg0Str += '\[\,\.]?[0-9]{0,' + decimalPlaces + '}';
} else if (decimalPlaces < 0) {
reg0Str += '\[\,\.]?[0-9]*';
}
reg0Str = allowNegative ? '^-?' + reg0Str : '^' + reg0Str;
reg0Str = reg0Str + '$';
var reg0 = new RegExp(reg0Str);
if (reg0.test(temp)) return true;
// first replace all non numbers
var reg1Str = '[^0-9' + (decimalPlaces != 0 ? '.' : '') + (decimalPlaces != 0 ? ',' : '') + (allowNegative ? '-' : '') + ']';
var reg1 = new RegExp(reg1Str, 'g');
temp = temp.replace(reg1, '');
if (allowNegative) {
// replace extra negative
var hasNegative = temp.length > 0 && temp.charAt(0) == '-';
var reg2 = /-/g;
temp = temp.replace(reg2, '');
if (hasNegative) temp = '-' + temp;
}
if (decimalPlaces != 0) {
var reg3 = /[\,\.]/g;
var reg3Array = reg3.exec(temp);
if (reg3Array != null) {
// keep only first occurrence of .
// and the number of places specified by decimalPlaces or the entire string if decimalPlaces < 0
var reg3Right = temp.substring(reg3Array.index + reg3Array[0].length);
reg3Right = reg3Right.replace(reg3, '');
reg3Right = decimalPlaces > 0 ? reg3Right.substring(0, decimalPlaces) : reg3Right;
temp = temp.substring(0,reg3Array.index) + '.' + reg3Right;
}
}
obj.value = temp;
}
function blockNonNumbers(obj, e, allowDecimal, allowNegative)
{
var key;
var isCtrl = false;
var keychar;
var reg;
if(window.event) {
key = e.keyCode;
isCtrl = window.event.ctrlKey
}
else if(e.which) {
key = e.which;
isCtrl = e.ctrlKey;
}
if (isNaN(key)) return true;
keychar = String.fromCharCode(key);
// check for backspace or delete, or if Ctrl was pressed
if (key == 8 || isCtrl)
{
return true;
}
reg = /\d/;
var isFirstN = allowNegative ? keychar == '-' && obj.value.indexOf('-') == -1 : false;
var isFirstD = allowDecimal ? keychar == '.' && obj.value.indexOf('.') == -1 : false;
var isFirstC = allowDecimal ? keychar == ',' && obj.value.indexOf(',') == -1 : false;
return isFirstN || isFirstD || isFirstC || reg.test(keychar);
}
function blockInvalid(obj)
{
var temp=obj.value;
if(temp=="-")
{
temp="";
}
if (temp.indexOf(".")==temp.length-1 && temp.indexOf(".")!=-1)
{
temp=temp+"00";
}
if (temp.indexOf(".")==0)
{
temp="0"+temp;
}
if (temp.indexOf(".")==1 && temp.indexOf("-")==0)
{
temp=temp.replace("-","-0") ;
}
if (temp.indexOf(",")==temp.length-1 && temp.indexOf(",")!=-1)
{
temp=temp+"00";
}
if (temp.indexOf(",")==0)
{
temp="0"+temp;
}
if (temp.indexOf(",")==1 && temp.indexOf("-")==0)
{
temp=temp.replace("-","-0") ;
}
temp=temp.replace(",",".") ;
obj.value=temp;
}
// end of price text-box allow numeric and allow 2 decimal points only
</script>
<input type="Text" id="id" value="" onblur="extractNumber(this,2,true);blockInvalid(this);" onkeyup="extractNumber(this,2,true);" onkeypress="return blockNonNumbers(this, event, true, true);">
- Fathi Amin
2
如果有人像我一样跌跌撞撞地来到这里，这是一个我写的jQuery 1.10.2版本，它对我来说非常有效，尽管资源密集：
/***************************************************
* Only allow numbers and one decimal in text boxes
***************************************************/
$('body').on('keydown keyup keypress change blur focus paste', 'input[type="text"]', function(){
var target = $(this);
var prev_val = target.val();
setTimeout(function(){
var chars = target.val().split("");
var decimal_exist = false;
var remove_char = false;
$.each(chars, function(key, value){
switch(value){
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
case '.':
if(value === '.'){
if(decimal_exist === false){
decimal_exist = true;
}
else{
remove_char = true;
chars[''+key+''] = '';
}
}
break;
default:
remove_char = true;
chars[''+key+''] = '';
break;
}
});
if(prev_val != target.val() && remove_char === true){
target.val(chars.join(''))
}
}, 0);
});
- MonkeyZeus
2
function isNumberKey(evt) {
debugger;
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode == 46 && evt.srcElement.value.split('.').length>1) {
return false;
}
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
- Anish Karunakaran
1
这很好。不过，我想将它限制在两个小数点以内，有什么办法吗？ - nodeffect
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，