限制input到文本框：只允许数字和小数点
如何限制input到文本框，以便它只接受数字和小数点？
<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>
form.onsubmit = function(){ return textarea.value.match(/^\d+(\.\d+)?$/); }
这是你在找什么？
我希望它有帮助。
编辑：我编辑我的例子上面，所以只能有一个时期，前面至less有一个数字，其次是至less一个数字。
接受的解决scheme不完整，因为您可以input多个“。”，例如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>
这里有一个解决scheme允许十进制数字，也限制小数点后两位小数点后两位。
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)">
你在找这样的东西吗？
<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>
只需要在Jquery中应用这个方法，你可以validation你的文本框只接受一个小数只。
function IsFloatOnly(element) { var value = $(element).val(); var regExp ="^\\d+(\\.\\d+)?$"; return value.match(regExp); }
请看这里的工作演示
这里介绍的所有解决scheme都使用单键事件。 这是非常容易出错的，因为input也可以使用copy'n'paste或drag'n'drop。 还有一些解决scheme限制使用非字符键如ctrl+c ， Pos1等
我build议不要检查每一个关键新闻，而是检查结果是否符合您的期望。
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>
对于像我这样在这里磕磕绊绊的人来说，下面是我写的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); });
一个小的更正@ rebisco的辉煌的答案，以完美的validation小数。
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; }
inputelement.onchange= inputelement.onkeyup= function isnumber(e){ e= window.event? e.srcElement: e.target; while(e.value && parseFloat(e.value)+''!= e.value){ e.value= e.value.slice(0, -1); } }
function integerwithdot(s, iid){ var i; s = s.toString(); for (i = 0; i < s.length; i++){ var c; if (s.charAt(i) == ".") { } else { c = s.charAt(i); } if (isNaN(c)) { c = ""; for(i=0;i<s.length-1;i++){ c += s.charAt(i); } document.getElementById(iid).value = c; return false; } } return true; }
这里是cas帮助你的脚本：
<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);">
假设您的文本框字段名称是Income
当您需要validation您的字段时，请调用此validation方法：
function validate() { var currency = document.getElementById("Income").value; var pattern = /^[1-9]\d*(?:\.\d{0,2})?$/ ; if (pattern.test(currency)) { alert("Currency is in valid format"); return true; } alert("Currency is not in valid format!Enter in 00.00 format"); return false; }
扩展@ rebisco的答案。 这下面的代码将只允许在文本框中的数字和单个'。'（句点）。
function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } else { // If the number field already has . then don't allow to enter . again. if (evt.target.value.search(/\./) > -1 && charCode == 46) { return false; } return true; } }
希望它能为你工作。
<input type="text" onkeypress="return chkNumeric(event)" /> <script> function chkNumeric(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { if (charCode == 46) { return true; } else { return false; } } return true; } </script>
解决scheme更好
var checkfloats = function(event){ var charCode = (event.which) ? event.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) return false; if(event.target.value.indexOf('.') >=0 && charCode == 46) return false; return true; }
从@rebisco开始回答：
function count_appearance(mainStr, searchFor) { return (mainStr.split(searchFor).length - 1); } function isNumberKey(evt) { $return = true; var charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) $return = false; $val = $(evt.originalTarget).val(); if (charCode == 46) { if (count_appearance($val, '.') > 0) { $return = false; } if ($val.length == 0) { $return = false; } } return $return; }
只允许这种格式：123123123 [.121213]
演示这里演示
以下代码为我工作
带有“onkeypress”事件的input框如下
<input type="text" onkeypress="return isNumberKey(this,event);" />
函数“isNumberKey”如下
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; }
我观察到，对于这里提供的所有答案，如果我们select文本框中的文本的一部分，并尝试覆盖该部分，那么这些东西就不起作用。 所以我修改了如下的函数：
<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; } if (charCode == 46 && evt.srcElement.value.split('.').length>1 ) { return false; } if(evt.srcElement.selectionStart<evt.srcElement.selectionEnd) { return true; } if(evt.srcElement.value.split('.').length>1 && evt.srcElement.value.split('.')[1].length==2) { return false; } return true; } //--> </SCRIPT> </HEAD> <BODY> <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar"> </BODY> </HTML>
对于十进制数字，也允许在小数点后有2位小数的负数…我修改了函数：
<input type="text" id="txtSample" onkeypress="return isNumberKey(event,this)"/> function isNumberKey(evt, element){ var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8 || charCode == 45)) return false; else { var len = $(element).val().length; // Validation Point var index = $(element).val().indexOf('.'); if ((index > 0 && charCode == 46) || len == 0 && charCode == 46) { return false; } if (index > 0) { var CharAfterdot = (len + 1) - index; if (CharAfterdot > 3) { return false; } } // Validating Negative sign index = $(element).val().indexOf('-'); if ((index > 0 && charCode == 45) || (len > 0 && charCode == 45)) { return false; } } return true; }
另一种方法来限制input到文本框，以便它只接受数字和小数点是在htmlinput内使用JavaScript。 这适用于我：
<input type="text" class="form-control" id="price" name="price" placeholder="Price" vrequired onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')">
–Accepts–
9
9.99
– 不接受 –
9.99.99
ABC
function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : evt.keyCode; if(charCode==8 || charCode==13|| charCode==99|| charCode==118 || charCode==46) { return true; } if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; }
它将只允许数字，并让你把“。” 为十进制。
<script type="text/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>
@Html.EditorFor(model => model.Orderids, new { id = "Orderids", Onkeypress=isNumberKey(event)})
这工作正常。
使用Pure-Javascript示例的最佳工作解决scheme现场演示： https ： //jsfiddle.net/manoj2010/ygkpa89o/
<script> function removeCommas(nStr) { if (nStr == null || nStr == "") return ""; return nStr.toString().replace(/,/g, ""); } function NumbersOnly(myfield, e, dec,neg) { if (isNaN(removeCommas(myfield.value)) && myfield.value != "-") { return false; } var allowNegativeNumber = neg || false; var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); var srcEl = e.srcElement ? e.srcElement : e.target; // control keys if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; // numbers else if ((("0123456789").indexOf(keychar) > -1)) return true; // decimal point jump else if (dec && (keychar == ".")) { //myfield.form.elements[dec].focus(); return srcEl.value.indexOf(".") == -1; } //allow negative numbers else if (allowNegativeNumber && (keychar == "-")) { return (srcEl.value.length == 0 || srcEl.value == "0.00") } else return false; } </script> <input name="txtDiscountSum" type="text" onKeyPress="return NumbersOnly(this, event,true)" />
自己处理这个问题，这就是我迄今为止所做的。 这或多或less的作品，但是由于新的价值检查是不可能的。 也不允许逗号作为千位分隔符，只有小数。
这不是完美的，但可能会提供一些想法。
app.directive('isNumber', function () { return function (scope, elem, attrs) { elem.bind('keypress', function (evt) { var keyCode = (evt.which) ? evt.which : event.keyCode; var testValue = (elem[0].value + String.fromCharCode(keyCode) + "0").replace(/ /g, ""); //check ignores spaces var regex = /^\-?\d+((\.|\,)\d+)?$/; var allowedChars = [8,9,13,27,32,37,39,44,45, 46] //control keys and separators //allows numbers, separators and controll keys and rejects others if ((keyCode > 47 && keyCode < 58) || allowedChars.indexOf(keyCode) >= 0) { //test the string with regex, decline if doesn't fit if (elem[0].value != "" && !regex.test(testValue)) { event.preventDefault(); return false; } return true; } event.preventDefault(); return false; }); }; });
允许：
11 11 .245（在控制器上格式化为1111.245）
11,44
-123.123
-1 014
0123（格式化为123）
不允许：
！@＃$ / *
ABC
11.11.1
11,11.1
0.42
<input type="text" onkeypress="return isNumberKey(event,this)"> <script> function isNumberKey(evt, obj) { var charCode = (evt.which) ? evt.which : event.keyCode var value = obj.value; var dotcontains = value.indexOf(".") != -1; if (dotcontains) if (charCode == 46) return false; if (charCode == 46) return true; if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } </script>
如果你想要浮点值，
这是我正在使用的function
<HTML> <HEAD> <SCRIPT language=Javascript> <!-- function check(e, value) { //Check Charater var unicode = e.charCode ? e.charCode : e.keyCode; if (value.indexOf(".") != -1) if (unicode == 46) return false; if (unicode != 8) if ((unicode < 48 || unicode > 57) && unicode != 46) return false; } //--> </SCRIPT> </HEAD> <BODY> <INPUT id="txtChar" onkeypress="return check(event,value)" type="text" name="txtChar"> </BODY> </HTML>
<input type="text" class="number_only" /> <script> $(document).ready(function() { $('.number_only').keypress(function (event) { return isNumber(event, this) }); }); function isNumber(evt, element) { var charCode = (evt.which) ? evt.which : event.keyCode if ((charCode != 45 || $(element).val().indexOf('-') != -1) && (charCode != 46 || $(element).val().indexOf('.') != -1) && ((charCode < 48 && charCode != 8) || charCode > 57)){ return false; } else { return true; } } </script>
http://www.encodedna.com/2013/05/enter-only-numbers-using-jquery.htm
document.getElementById('value').addEventListener('keydown', function(e) { var key = e.keyCode ? e.keyCode : e.which; /*lenght of value to use with index to know how many numbers after.*/ var len = $('#value').val().length; var index = $('#value').val().indexOf('.'); if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 || (key == 65 && ( e.ctrlKey || e.metaKey ) ) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) || (key >= 96 && key <= 105) )){ e.preventDefault(); } /*if theres a . count how many and if reachs 2 digits after . it blocks*/ if (index > 0) { var CharAfterdot = (len + 1) - index; if (CharAfterdot > 3) { /*permits the backsapce to remove :D could be improved*/ if (!(key == 8)) { e.preventDefault(); } /*blocks if you try to add a new . */ }else if ( key == 110) { e.preventDefault(); } /*if you try to add a . and theres no digit yet it adds a 0.*/ } else if( key == 110&& len==0){ e.preventDefault(); $('#value').val('0.'); } });
