退格键在单击确定按钮后不起作用

Question

我在下面写了几行代码

$(".only-numbers").keypress(function(e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
swal({
title: "Warning",
type: "warning",
text: "Please enter Numbers only"
});
return false;
} else {
return true;
}
});
$("#driver_contact_number").on("keyup keydown change", function(event) {
var max_chars = 12;
if ($(this).val().length >= max_chars) {
swal({
title: "Warning",
type: "warning",
text: "Number should not exceed 12 digits"
});
$(this).val($(this).val().substr(0, max_chars));
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<input id="driver_contact_number" class="only-numbers">

每当用户输入超过 12 位数字时，都会显示 swal 警告消息，但在单击 swal 弹出窗口的确定按钮后，当我们单击退格键时，它不起作用。请帮忙!!

Answer 1

1(在显示警告消息之前，您应该检查keyCode(del，退格键(。

if (event.which != 8 && event.which != 46  && $(this).val().length >= max_chars)

2( 您应该将输入集中在 swal 关闭事件上。

$(".only-numbers").keypress(function(e){
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
{
swal({
title: "Warning",
type: "warning",
text: "Please enter Numbers only"
}).then(function() {
										$(e.target).focus();
										});
return false;
}
else
{
return true;
}
}); 
$("#driver_contact_number").on("keyup keydown change", function (event) {
var max_chars = 12;
if (event.which != 13 && event.which != 8 && event.which != 46  && $(this).val().length >= max_chars) { 
swal({
title: "Warning",
type: "warning",
text: "Number should not exceed 12 digits"
}).then(function() {
									$(event.target).focus();
								 });
$(this).val($(this).val().substr(0, max_chars));
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<input id ="driver_contact_number" class="only-numbers">

Answer 2

关闭警报后，您可以利用承诺将注意力集中在您来自的地方。

其他更改：

• 我不知道你为什么有其他的，但我在不需要的时候删除了它。
• 您有一个已弃用的type所以我将其更改为icon
• 您的长度函数具有>= 但应该>这导致了退格问题

$(".only-numbers").on('keypress', function(e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
swal({
title: "Warning",
icon: "warning",
text: "Please enter Numbers only"
}).then(function() {
$(e.target).focus();
});
return false;
}
return true;
});
$("#driver_contact_number").on("keyup keydown change", function(event) {
var max_chars = 12;
if ($(this).val().length > max_chars) {
swal({
title: "Warning",
icon: "warning",
text: "Number should not exceed 12 digits"
}).then(function() {
$(event.target).focus();
});
$(this).val($(this).val().substr(0, max_chars));
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<input id="driver_contact_number" class="only-numbers">

Answer 3

如果没有工作示例，很难准确判断，但我想说的是，当您单击警报的"确定"按钮时，您的输入不再集中，因此退格不起作用。

您可以通过在单击"确定"后将焦点设置为输入来解决此问题(有一些方法，例如 swal。DismissReason.close在文档中：https://sweetalert2.github.io/#handling-dismissals(