甜蜜警报在单击确定按钮或出现甜蜜警报时按回车键之前立即关闭

Question

im 使用 Sweet Alert 新建，首先我将显示代码：

    $('#byr').keydown(function (e){
      var bayar = Number($('#byr').val());
      var total = Number($('.rp-harga').text());
      var kmb = $('.rp-kmb').text();
      if(e.keyCode == 13)
      {
        if(bayar<total)
        {
          alert("Uang Anda Kurang");
        }
        else {
          swal("Transaksi Berhasil", "Kembalian : Rp " + (bayar-total).toString(), "success");
        }
      }
    });

问题是当我在用else条件填充输入文本后按回车键时，它会显示甜蜜警报，但是甜蜜警报将在我单击确定按钮或在出现甜蜜警报时按回车键之前立即关闭

我尝试添加e.preventDevaults()，并遇到以下问题：

1. 如果我在 SWAL 代码之前添加它，则警报无法出现在其他连续中
2. 如果我在 SWAL 代码之后添加它，也会发生同样的问题(在单击确定/按回车键之前立即关闭 Swal(。

这是一个解决我的问题的工作JSFiddle。

Answer 1

我假设你正在使用sweetalert2。此插件有一个配置选项：

allowEnter键：如果设置为 false，则用户无法通过按 Enter 或空格键来确认模式，除非他们手动聚焦确认按钮。

因此，您可以：

• 禁用此功能设置允许输入键为 false

• 在 10 毫秒后调用 SWAL，以克服第一次按键的以下 SRC 代码：

  window.onkeydown = handleKeyDown;

$('#byr').keydown(function (e) {
    var bayar = Number($('#byr').val());
    var total = 0;
    if (e.keyCode == 13) {
        if (bayar < total) {
            alert("Uang Anda Kurang");
        }
        else {
            setTimeout(function() {
                swal({
                    title: "Transaksi Berhasil",
                    text: "Kembalian : Rp " + (bayar - total).toString(),
                    type: "success",
                    allowEnterKey: true // default value
                });
            }, 10)
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.6.2/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/sweetalert2/6.6.2/sweetalert2.min.js"></script>
<input type="text" id="byr">