javascript - 正则表达式或模式 - 如何防止多次输入同一字符？

Question

我试图让文本字段只输入十进制和数字值，如下所示

以下是有效的

 .099
  .8
  10
  99.9
  2.9
  4.88
  0.0

无效

abc
ac$%$
asdf90
09.89abg#$#
-903abe
+8938/.99
....90.97

到目前为止一切都很好。但如果用户只给出小数点或多于一个没有数字的小数点，我想突出显示文本字段的边框。当他提供有效输入时，突出显示应该被删除。

如何使下面的代码变得非常简单。

<input type = "text" maxlength = 4, value ="0.0", min=0 max=100/>

$(key).bind("#txtOne", function(obj){ // but i dont know why this Jquery allow character be entered sometimes
    let numberOnly=/^[0-9]+\\.?[0-9]*$/;                    
    if (!numberOnly) {
        return obj.preventDefault();
    }else{
        return true;
    }
}); 

$("#txtOne").on("keypress keyup blur", function(event) {    //after including this, working as expect 
  $(this).val($(this).val().replace(/[^0-9\.]/g, ''));
  if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
});

非常感谢您的帮助。提前致谢

如果可能请给我一些 fiddle 的例子

Answer 1

所以你想要实现的不是阻止人们连续不输入小数点，而是强制用户输入一个数字。我做了一个小代码来向你展示它是如何工作的

$("input").on("input", function() { //on user input
    const value = $(this).val();
  if (isNaN(value)) { // check if this is a number. '1.0' is a number. '1.0.a' is not'
    $(this).css('color', 'red');
  } else {
    $(this).css('color', 'black');
  }
})

运行 fiddle :Jsfiddle