2010-05-11 186 views
85

如何限制输入到文本框,以便它只接受数字和小数点?限制对文本框的输入:仅允许数字和小数点

+9

他原来的问题是伟大的,阿马尔... !!!为什么要改变它..? ;) – SpikETidE 2010-05-11 05:11:50

+11

为什么反对票?这个人在这里是新的,帮助他改善他的追求,plz。 – lexu 2010-05-11 05:13:42

+0

Ayyappan.Anbalagan,在帖子中添加一些示例:) 所有这些字符串都适合您吗? 192.168 192.168.0.1 – 2010-05-11 05:47:00

回答

132

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

这真的有效!

+1

为什么&& charCode> 31需要? – contactmatt 2012-08-29 21:01:24

+2

字符31是单元分隔符代码。相当多的数字和文字在32和更高之间。代码显示,如果输入的字符代码不是十进制数AND高于31(单位分隔符)但低于48(数字0)或高于57(数字9),请不要接受它。 – 2012-11-02 00:24:36

+0

请添加参考来源:http://www.cambiaresearch.com/articles/39/how-can-i-use-javascript-to-allow-only-numbers-to-be-entered-in-a-文本框 – Bart 2012-11-05 05:18:21

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

这是你要找的吗?

我希望它有帮助。

编辑:我编辑我的例子上面,以便只能有一个时期,前面至少有一个数字,其次是至少一个数字。

+0

认为这也将验证'99 .23.65.86'.... 但我想这个问题是关于验证'56987.32'单点......... – SpikETidE 2010-05-11 05:23:44

+0

我看到海报已编辑他/她原来的问题。感谢更新! – tau 2010-05-11 05:25:56

+2

尝试使用^ \ d +(\。\ d +)?$ – Ben 2010-05-11 05:35:21

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

你错过了点(小数点) – Ben 2010-05-11 05:31:54

+0

本,现在修好;) – 2010-05-11 05:43:55

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

这里是脚本,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);"> 
1

假设你的文本字段名为Income
电话时,需要验证你的领域这个validate方法:

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

它将只允许数字,并会让你把“”为十进制。

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

小幅回调至@ 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; 
} 
+0

这是非常好的。但是,我想将它限制在2个小数点,无论如何要做到这一点? – nodeffect 2015-06-09 07:02:04

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

这工作得很好。

3

只需要在Jquery中应用此方法,您可以验证您的文本框只接受只有小数的数字。

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

请参阅工作演示here

+0

一个演示的唯一反应,效果很好.. :) – Rohit416 2014-02-18 09:41:47

0

从@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 [0.121213]

演示这里demo

1

扩展@ 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; 
     } 
    } 
1

希望它能为你工作。

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

由于您可以输入多个'。',例如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> 
+0

我用你的答案,但我修改此onkeypress =“返回isNumberKey(this,事件);” – 2015-05-28 12:12:13

+0

是的,我认为这是可选的键入传递事件,因为它适用于这两种情况,谢谢 – 2015-05-30 05:14:34

1

更好的解决方案

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

这里是一个多解决方案,它允许十进制数,也限制了小数点后位数为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)">

+0

完美的答案... – 2015-11-13 10:53:31

+0

几乎完美..你的'if'的最后一个条件是缺少大写的“C”。 – DNKROZ 2017-08-03 12:13:23

0

下面的代码为我工作

与 “onkeypress事件” 事件作为输入框如下

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

0

我观察到,所有的答案在这里提供的东西都没有,如果我们选择在文本框中的文本的某些部分,并试图覆盖的那部分工作。 所以我修改的是如下的功能:

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

十进制数,也允许有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; 
    } 
-1
<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

0

替代的方式来限制输入到文本框,以便它仅接受数字和小数点是 在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.99

--Do不accept--

9.99。99

ABC

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

允许2位小数,如果您添加一个。它增加了0.并且限制为1。和2位十进制 – buga 2016-10-20 16:33:10

+0

代码的一些解释是有用的。此外,您的评论下的答案应该作为答案的一部分,作为补充说明。 – 2016-10-20 16:57:37

0

最佳,并与纯JavaScript的样本 现场演示工作液: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 ((("").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)" />

0

工作的问题我自己,这就是我的本钱至今。这或多或少的作用,但由于新的值检查,不可能在之后添加减号。也不允许逗号作为千位分隔符,只有小数。

这并不完美,但可能会提供一些想法。

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 0.245(在格式化上模糊到1111.245控制器)

11,44

-123.123

-1 014

0123(格式化为123模糊)

不允许:

@#$/*

ABC

11.11.1

11,11.1

0.42

3

所有的解决方案呈现!这里使用单个关键事件。这很容易出错,因为输入也可以使用copy'n'paste或drag'n'drop。还有一些解决方案限制非字符键的使用,如ctrl+cPos1等。

我建议您不要检查每个按键,而是检查结果是否与您的期望相符。

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扩展为您想要接受的任何数字格式。这比检查单个按键更具可维护性和可扩展性。

+0

它接受'.'作为有效的输入。 – Andrew 2017-05-10 02:21:50

+0

@Andrew所以做一些编程语言。评估 ”。”浮动通常导致“0.0”。 – 2017-07-13 00:33:17

+0

这是最优雅的解决方案! – jkd 2017-10-24 08:27:04

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

如果你想为浮点值,

这里是我使用

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

0

我知道这个问题是很老的功能,但我们仍然往往得到这样的要求。有很多例子,但很多似乎太详细复杂一个简单的implimentation。

看到这个https://jsfiddle.net/vibs2006/rn0fvxuk/并改进它(如果可以的话)。它适用于IE,Firefox,Chrome和Edge浏览器。

这里是工作代码。

  
 
     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; 
 
        
 
\t \t \t \t \t \t case "Decimal": //Numpad Decimal in Edge Browser 
 
      case ".":  //Numpad Decimal in Chrome and Firefox      
 
      case "Del": \t \t \t // 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>

相关问题