【问题标题】:sweet alert immidiately closed before click OK button or hit enter when sweet alert appeared甜蜜警报在点击确定按钮之前立即关闭,或者在甜蜜警报出现时按回车键
【发布时间】:2017-05-22 17:19:22
【问题描述】:

我是新人使用甜蜜警报,首先我将显示代码:

    $('#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 条件填充输入文本后按 enter 时,它会显示 sweet alert,但在我点击 OK 按钮或在出现 sweet alert 时按 enter 之前,sweet alert 会立即关闭

我尝试添加e.preventDevaults(),但遇到了这些问题:

  1. 如果我在 swal 代码之前添加它,则警报不会出现在 else contidion 中
  2. 如果我在 swal 代码之后添加它,也会发生同样的问题(swal 在单击确定/回车之前立即关闭)。

Here 是一个可以解决我的问题的 JSFiddle。

【问题讨论】:

标签: javascript jquery sweetalert


【解决方案1】:

我假设您使用的是sweetalert2。这个插件有一个配置选项:

allowEnterKey:如果设置为 false,则用户无法通过按 Enter 或 Space 键来确认模式,除非他们手动聚焦确认按钮。

因此你可以:

  • 禁用此功能设置 allowEnterKey 为 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">

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-03-20
    • 2023-03-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-25
    相关资源
    最近更新 更多