javascript - 退格键未清除 mozilla 浏览器中的字段

Question

我的输入框只允许输入数字。在 chrome 和 firefox 中它只允许输入数字，但在 mozilla 中使用退格键无法删除数字。

$(document).ready(function () {
$('#price').keypress(function(event) {
		if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
			event.preventDefault();
		}
	});
});

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

Answer 1

通常keypress仅检测可打印按键，但当前版本的Mozilla也能够检测退格键。请改用 keydown 事件。

演示

$(document).ready(function() {
  $('#price').keydown(function(event) {
    console.log(event.which);
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
      event.preventDefault();
    }
  });
});

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

另一种方法 重要!

使用上述方法，您还必须检查其他特殊键，例如箭头键和删除键，更不用说 . 是否放置正确且仅放置一次。

另一种方法可能是简单地从 keyup 上的字符串中删除非数字字符

$(document).ready(function() {
  $('#price').keyup(function(event) {
     this.value = this.value.replace( /[^0-9.]/g, "" );
     this.value = this.value.split(".").reduce((a,b,i)=> i > 1 ? a+b : a+"."+b );
  });
});

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