javascript代码阻止NaN但不允许我在keyup上输入小数

Question

$('#cost').keyup(function(){

  // value is either the inputed numbers or 0 if none
  $(this).val(parseFloat($(this).val()) || 0);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='cost' />

我想防止 NaN 发生，所以我将值默认为 0 并且它工作正常。但是，当我输入数字时，它不允许我添加小数或将光标向后移动以编辑输入。我确信这与事件监听器的类型有关，但我很困惑并且我到处都找过。任何帮助将不胜感激。

Answer 1

keypress() 事件在这种情况下可能更有意义，因为移动光标时不会触发它。

如果键不是数字或小数，则返回 false，而不是设置值:

$('#cost').keypress(function(e) {
  if(!/[0-9\.]/.test(e.key)) {  //allow only numbers and the decimal point
    return false;
  }
  
  if(/\./.test($(this).val()) && e.key==='.') { //prevent decimal from being entered twice
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='cost' />