javascript - 单击 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

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

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

2) 您应该将输入重点放在 swal close 事件上。

         $(".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">