退格键未清除 Mozilla 浏览器中的字段答案

【问题标题】：Backspace is not clearing the field in mozilla browser退格键未清除 Mozilla 浏览器中的字段
【发布时间】：2017-11-15 14:34:15
【问题描述】：

我的输入框只允许数字。在 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'>

【问题讨论】：

标签： javascript jquery html

【解决方案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'>

【讨论】：

我认为这段代码的 keycode == 8 有问题，请检查一次。
@Vinoth 我没有使用 keypress 事件，而是使用 keydown。
@gurvinder，在你使用 key down 之前，现在你的答案和我的一样。
@Vinoth 我的答案和你的一样吗？即使我的第二种方法使用keyup，keyup 事件中的代码与您的完全不同。

【解决方案2】：

发生这种情况是因为您使用了错误的方式来避免退格。有退格 8 作为关键代码，因此您避免了这种情况以防止默认值。请改用此代码。

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

【讨论】：

【解决方案3】：

keypress 事件在 Firefox 中不起作用。您可以使用keyup 或keydown 事件，它会起作用。

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

【讨论】：

现在你的答案和我的基本一样。