输入数字验证 - 限制只输入数字或数字,int和float两者

Question

如何限制输入字段只输入数字/数字int和浮动两者.有时我们需要允许像amount这样的字段的整数和浮点值,因此在这种情况下需要验证.没有可用的解决方案,但它们具有大尺寸代码.因此需要一个简短但有效的代码.

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Answer 1

不需要数字输入限制的长代码只需尝试此代码.

它还接受有效的int和float两个值.

Javascript方法

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQuery方法

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

UPDATE

以上答案适用于大多数常见用例 - 将输入验证为数字.

但是根据评论,有些人希望允许一些特殊情况,比如负数,并在删除之前向用户显示无效的击键,因此下面是这些特殊用例的代码片段.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Answer 2

单线解决方案#1:

<input type="number">与step属性一起使用.

<input type="number" step="0.0001"> // The user can enter up to 4 decimal places.

<input type="number" step="any"> // Not supported in all browsers, but permits numbers of any decimal precision.

您还可以使用min和/或max属性设置最小值和/或最大值.

单线解决方案#2:

使用input带有RegExp pattern属性的常规文本元素.

<input type="text" pattern="^-?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)$">

此RegExp接受以点(.)和/或负号(-)开头的数字.