Question

我想要输入字段接受数字和仅十进制。

输入字段不应接受除单个小数以外的负数，字母，符号。数字1在输入类型＆＃34;文本＆＃34;下工作得非常好。但是，数字2不起作用，唯一的区别是数字类型。

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

Answer 1

＆＃13;

$('#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); 
});

＆＃13;

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

＆＃13;

在输入中添加这样的ID，

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

<强> JS： var pastValue，pastSelectionStart，pastSelectionEnd;

$("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 2

您可以使用class进行通用解决方案，而不是使用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 3

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

如果您只需要接受数字，则需要在输入前检查keyCode，如果$("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 ) });与数字或箭头键不匹配或删除或退格，则返回false：

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

{{1}}

Answer 4

Chrome似乎已停用针对here类型编号和电子邮件的输入的选择API，因此您正在寻找一种解决方法，因为此代码无效。

您好

Chrome浏览器最近禁用了输入类型的select api   号码和电子邮件：https://codereview.chromium.org/100433008/#ps60001

select api是允许的属性和函数的集合   我们获取并设置用户在一个文本中突出显示的文本部分

有问题的属性和功能是：select（）selectionStart   selectionEnd selectionDirection setRangeText（）setSelectionRange（）

检查你的jsfiddle控制台，你可以找到错误的确切内容：

未捕获的InvalidStateError：无法读取＆＃39; selectionStart＆＃39; 属性来自＆＃39; HTMLInputElement＆＃39;：输入元素的类型（＆＃39;数字＆＃39;）不支持选择。

Answer 5

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

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

JQuery输入值数和仅十进制

6 个答案: