JQuery 输入值仅数字和小数

Question

我希望输入字段只接受数字和小数。

输入字段不能接受负数、字母、小数点以外的符号。 数字 1 在输入类型“文本”的情况下工作得非常好。 但是，数字 2 不起作用，唯一的区别是类型为数字。

我只想要数字和小数。没有否定，没有字母，没有符号。

Answer 1

您可以使用类而不是使用 ID 来进行通用解决方案。

     $('.inputclassname').on('keypress', function(e){
     return e.metaKey || // cmd/ctrl
     e.which <= 0 || // arrow keys
     e.which == 8 || // delete key
     /[0-9]/.test(String.fromCharCode(e.which)); // numbers
     })

Answer 2

Chrome 似乎已禁用输入类型编号和电子邮件的选择 API，如发现 here，因此您正在寻找解决方法，因为此代码无法正常工作。

嗨

Chrome 浏览器最近禁用了类型输入的选择 API 电话号码和邮箱：https://codereview.chromium.org/100433008/#ps60001

select api 是一个属性和函数的集合，允许 我们获取并设置用户在

有问题的属性和函数是：select() selectionStart selectionEnd selectionDirection setRangeText() setSelectionRange()

检查您的 jsfiddle 控制台，您可以找到错误的具体内容：

未捕获的 InvalidStateError：未能读取“selectionStart” 'HTMLInputElement' 的属性：输入元素的类型（'number'） 不支持选择。

Answer 3

所有的键盘按键都有不同的 ASCII 码，只是创建一个脚本，通过识别这些 ASCII 码，除了数字和小数之外，其余部分将被忽略

HTML

<input type="text" class="inputNumberDot">

JS

$(document).ready(function() {
  $('.inputNumberDot').keypress(function(event) {
    var charCode = (event.which) ? event.which : event.keyCode

    if (
      (charCode != 45 || $(this).val().indexOf('-') != -1) && // “-” CHECK MINUS, AND ONLY ONE.
      (charCode != 46 || $(this).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
      (charCode < 48 || charCode > 57))
      return false;

    return true;

  });
});

工作示例：https://jsfiddle.net/Luaq2f65/2/

Answer 4

如果 <input type="number" /> 无效（如果它包含字母），则您无法从其获取价值。每次您尝试访问this.value.length 时，它都等于""。因此，您的 if 声明从未到达。

如果只需要接受数字，则需要在输入前检查keyCode，如果keyCode不匹配数字或箭头键或删除或退格，则返回false：

$("input").on("keydown", function(e) {
    var charCode = e.which;

    return !!(
            (charCode >= 48 && charCode <= 57)
            || (charCode >= 37 && charCode <= 40)
            || (charCode >= 96 && charCode <= 105)
            || charCode == 17
            || charCode == 13
            || charCode == 46
            || charCode == 8
            || charCode == 9
            || charCode == 188

    )
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" min="0" step="0.1" />

Answer 5

$('#decimal').keyup(function(){
    var val = $(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) 
             val =val.replace(/\.+$/,"");
    }
    $(this).val(val); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" id="decimal"min="0" max="10" step="0.25" value="0.00" />

在输入中添加这样的ID，

<p>
number 2(input type="number") <input id="decimal" type="number" onchange="Numeric(this.event)" />
</p>

JS： var 过去值，过去选择开始，过去选择结束；

$("input").on("keydown", function() {
    pastValue          = this.value;
    pastSelectionStart = this.selectionStart;
    pastSelectionEnd   = this.selectionEnd;
}).on("input propertychange", function() {
    var regex = /^[0-9]+\.?[0-9]*$/;

    if (this.value.length > 0 && !regex.test(this.value)) {
        this.value          = pastValue;
        this.selectionStart = pastSelectionStart;
        this.selectionEnd   = pastSelectionEnd;
    }

});

      $('#decimal').keyup(function(){
    var val = $(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) 
             val =val.replace(/\.+$/,"");
    }
    $(this).val(val); 
});

Answer 6

简单 jquery 的另一种解决方案是

HTML

<input type="text" id="amount" class="decimal" placeholder="Enter Amount">

jQuery

$(function(){
  $("input.decimal").bind("change keyup input", function () {
    var position = this.selectionStart - 1;
    //remove all but number and .
    var fixed = this.value.replace(/[^0-9\.]/g, '');
    if (fixed.charAt(0) === '.') //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if (pos >= 0) //avoid more than one .
      fixed = fixed.substr(0, pos) + fixed.slice(pos).replace('.', '');

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

工作示例：JS FIDDLE