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

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

如果没有一个有效的例子很难准确地说出来，但我会说当你点击警报的 "ok" 按钮时，你的输入不再集中，所以退格键不起作用。

您可能可以通过在单击 "ok" 后将焦点设置到您的输入来解决这个问题（文档中有一些方法，例如 swal.DismissReason.close：https://sweetalert2.github.io/#handling-dismissals）

Answer 2

1) 在显示警告消息之前，您应该检查 keyCode (del, backspace)。

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 3

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

其他变化：

我不知道为什么你有其他的，但我删除了不需要的。
您有一个已弃用的 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">

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

Backspace key not working after clicking okay button of swal

javascript

jquery

sweetalert