限制输入文本框: 只允许数字和小数点

小开

form.onsubmit = function(){
return textarea.value.match(/^\d+(\.\d+)?$/);
}

这就是你要找的吗？

希望能有所帮助。

编辑: 我编辑了上面的例子，所以只能有一个句点，前面至少有一个数字，后面至少有一个数字。

小开

你在找这样的东西吗？

   <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>

小开

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);
}
}

小开

最佳答案

<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>

This really works!

小开

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;
}

小开

here is script that cas help you :

<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
当需要验证字段时，调用此验证方法:

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;
}

小开

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;
}

它只允许使用数字，并允许您将“ .”表示十进制。

小开

For anyone stumbling here like I did, here is a jQuery 1.10.2 version I wrote which is working very well for me albeit resource intensive:

/***************************************************
* 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 完美验证小数点的绝妙回答的一个小小的更正。

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;
}

小开

<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)})

这样挺好的。

小开

只需要在 Jquery 中应用这个方法，就可以验证文本框只接受带有小数的数字。

function IsFloatOnly(element) {
var value = $(element).val();
var regExp ="^\\d+(\\.\\d+)?$";
return value.match(regExp);
}

请参阅工作演示给你

小开

从@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;
}

Allows only this format : 123123123[.121213]

Demo here demo

小开

扩展@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>

小开

接受的解决方案不完整，因为您可以输入多个’比如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>

小开

更好的解决办法

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;
}

小开

这里还有一个解决方案，它允许使用十进制数，并将小数后的数字限制为小数点后2位。

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)">

小开

遵循代码对我来说很管用

具有“ onkeypress”事件的输入框如下所示

<input type="text" onkeypress="return isNumberKey(this,event);" />

The function "isNumberKey" is as follows

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;
}

小开

我注意到，对于这里提供的所有答案，如果我们在文本框中选择文本的某个部分并试图覆盖该部分，那么就不能正常工作。所以我修改了下面的函数:

    <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>

小开

对于 Decimal 数，并且允许在点后面有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 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

小开

另一种限制输入到文本框的方法，这样它只接受数字，而小数点是在 html 输入中使用 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

小开

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.');
}
});

小开

Best and working solution with Pure-Javascript sample 现场演示: 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)" />

小开

我自己也在研究这个问题，这就是我目前所知道的。这或多或少是可行的，但是由于新的值检查，不可能在后面添加减号。也不允许逗号作为千位分隔符，只允许小数。

虽然不是很完美，但也许能给你一些启发。

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;
});
};
});

允许量:

1111.245(在模糊格式的控制器中为1111.245)

11,44

-123.123

-1 014

0123(模糊格式为123)

不允许:

!@#$/*

Abc

11.11.1

.42

小开

这里提供的所有解决方案都使用单键事件。这是非常容易出错的，因为输入也可以使用复制’n’粘贴或拖放’n’下降。还有一些解决方案限制了非字符键的使用，如 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>

The oninput event is triggered just after something was changed in the text area and before being rendered.

You can extend the RegEx to whatever number format you want to accept. This is far more maintainable and extendible than checking for single key presses.

小开

<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>

小开

如果需要浮点数值,

下面是我正在使用的函数

<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>

小开

我知道这个问题很古老，但我们仍然经常得到这样的要求。有许多例子，然而，许多似乎是太冗长或复杂简单的实施。

See this https://jsfiddle.net/vibs2006/rn0fvxuk/ and improve it (if you can). It works on IE, Firefox, Chrome and Edge Browser.

这是工作代码。


function IsNumeric(e) {
var IsValidationSuccessful = false;
console.log(e.target.value);
document.getElementById("info").innerHTML = "You just typed ''" + e.key + "''";
//console.log("e.Key Value = "+e.key);
switch (e.key)
{
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case "0":
case "Backspace":
IsValidationSuccessful = true;
break;
                 

case "Decimal":  //Numpad Decimal in Edge Browser
case ".":        //Numpad Decimal in Chrome and Firefox
case "Del": 			// Internet Explorer 11 and less Numpad Decimal
if (e.target.value.indexOf(".") >= 1) //Checking if already Decimal exists
{
IsValidationSuccessful = false;
}
else
{
IsValidationSuccessful = true;
}
break;


default:
IsValidationSuccessful = false;
}
//debugger;
if(IsValidationSuccessful == false){
         

document.getElementById("error").style = "display:Block";
}else{
document.getElementById("error").style = "display:none";
}
         

return IsValidationSuccessful;
}

Numeric Value: <input type="number" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" /><br />
<span id="error" style="color: Red; display: none">* Input digits (0 - 9) and Decimals Only</span><br />
<div id="info"></div>

小开

我选择在 oninput事件中处理这个问题是为了处理键盘粘贴、鼠标粘贴和击键的问题。传递 true 或 false 以指示十进制或整数验证。

It's basically three steps in three one liners. If you don't want to truncate the decimals comment the third step. Adjustments for rounding can be made in the third step as well.

// Example Decimal usage;
// <input type="text"  oninput="ValidateNumber(this, true);" />
// Example Integer usage:
// <input type="text"  oninput="ValidateNumber(this, false);" />
function ValidateNumber(elm, isDecimal) {
try {


// For integers, replace everything except for numbers with blanks.
if (!isDecimal)
elm.value = elm.value.replace(/[^0-9]/g, '');
else {
// 1. For decimals, replace everything except for numbers and periods with blanks.
// 2. Then we'll remove all leading ocurrences (duplicate) periods
// 3. Then we'll chop off anything after two decimal places.


// 1. replace everything except for numbers and periods with blanks.
elm.value = elm.value.replace(/[^0-9.]/g, '');


//2. remove all leading ocurrences (duplicate) periods
elm.value = elm.value.replace(/\.(?=.*\.)/g, '');


// 3. chop off anything after two decimal places.
// In comparison to lengh, our index is behind one count, then we add two for our decimal places.
var decimalIndex = elm.value.indexOf('.');
if (decimalIndex != -1) { elm.value = elm.value.substr(0, decimalIndex + 3); }
}
}
catch (err) {
alert("ValidateNumber " + err);
}
}

小开

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

可以通过指定 ASCII 值范围来限制用户输入的值。
示例 : 对于数值(0到9) ，从48到57

小开

  function onlyDotsAndNumbers(txt, event) {
var charCode = (event.which) ? event.which : event.keyCode
if (charCode == 46) {
if (txt.value.indexOf(".") < 0)
return true;
else
return false;
}


if (txt.value.indexOf(".") > 0) {
var txtlen = txt.value.length;
var dotpos = txt.value.indexOf(".");
//Change the number here to allow more decimal points than 2
if ((txtlen - dotpos) > 2)
return false;
}


if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;


return true;
}




<input type="text" id="txtAmount" onkeypress="return onlyDotsAndNumbers(this,event);" maxlength="10" oncopy="return false" ondrag="return false" ondrop="return false" onpaste="return false" />

只有数字，一个小数点，没有复制粘贴。