如何在Sweet Alert 2的输入框中启用确认按钮

Question

当用户没有更改sweet警报内文本框中的任何值时，我需要禁用确认按钮，仅当文本框中的值更改时才启用它，但我似乎找不到这样的方法。以下是我的代码：

swal({
            title: 'Please Enter Page Name',
            input: 'text',
            inputValue: PageName,
            confirmButtonText: 'Save',
            onOpen: function (){
                swal.disableConfirmButton(); //this disables the button
            }
            preConfirm: function (Name) {
                return new Promise(function (resolve, reject) {
                    resolve();
                })
            },
            allowOutsideClick: false
        })

我使用了onOpen触发了swal.disableConfirmButton();方法，但我不知道在哪里使用swal.enableConfirmButton();。是否有类似于onInput或类似的功能？如果是，如何使用它来实现所需的结果？

这是我目前实现的代码片段的代码笔。 https://codepen.io/zeeshanadilbutt/pen/NLvmZz?editors=0010

- Zeeshan Adil

---

你能提供一个示例，展示目前已经实现的功能吗？ - DragonBorn

@DragonBorn 这是 CodePen 的链接 https://codepen.io/zeeshanadilbutt/pen/NLvmZz?editors=0010一切都很好，我只需要在文本框中没有输入任何内容时禁用保存按钮，并在用户输入内容时启用它。 - Zeeshan Adil

Answer 1

由于没有onInput或类似的功能，因此您可以在onOpen中使用getInput，并为其添加一个事件侦听器，以启用或禁用您的按钮。

请查看工作代码片段。

swal({
  input: 'text',
  onOpen: function () {
    swal.disableConfirmButton();
    swal.getInput().addEventListener('keyup', function(e) {
      if(e.target.value === '') {
        swal.disableConfirmButton();
      } else {
        swal.enableConfirmButton();
      }
    })
  }
});

  <script src="https://unpkg.com/sweetalert2"></script> 

- DragonBorn

---

我考虑了一下，这似乎是唯一的解决方案。感谢您的帮助 :) - Zeeshan Adil

很高兴我能帮到你。 - DragonBorn

不需要使用 jQuery 来添加事件监听器 :) 我简化了代码。 - Limon Monte

@LimonMonte 好多了！ :) - Zeeshan Adil

@LimonMonte，现在代码干净多了。我已经相应地更新了说明。 - DragonBorn

Answer 2

我们可以通过getConfirmButton和didOpen来启用/禁用确认按钮（this部分不在文档中）。

SweetAlert2 v11

Swal.fire({
            title: 'Alert',
            didOpen: function () {
                Swal.getConfirmButton().setAttribute('disabled', 'true')
            }
        })

- rb_19

Answer 3

对于未来的探索者...

两个答案对我都不起作用。但是@rb_19的答案给了我一个继续前进的路径。

实际上，Swal.getConfirmButton()返回按钮的HTML元素，所以Swal.getConfirmButton().setAttribute('disabled', 'true')是有效的，但是Swal.getConfirmButton().setAttribute('disabled', 'false')不起作用。 disableConfirmButton()和enableConfirmButton()听起来已经过时了，在最新版本（11.7.32）中不存在这些函数。

所以为了禁用，我使用了removeAttribute和didOpen事件，如下面的示例所示。

if (e.target.value != inputValidationText) {
  swal.getConfirmButton().setAttribute("disabled", "true");
} else {
  swal.getConfirmButton().removeAttribute("disabled");
}

onOpen 似乎也已经过时了。

仅使用 didOpen 并不能让我将组件启动为禁用状态，所以我同时使用了 willOpen。

完整代码

swal.fire({
      title: message,
      input: 'text',
      willOpen: function () {
        swal.getConfirmButton().setAttribute('disabled', 'true');
      },
      didOpen: function () {
        swal.getInput().addEventListener('keyup', function (e: any) {
          if (e.target.value != inputValidationText) {
            swal.getConfirmButton().setAttribute('disabled', 'true');
          } else {
            swal.getConfirmButton().removeAttribute('disabled');
          }
        });
      },
      showDenyButton: true,
      showCancelButton: showCancelButton,
      confirmButtonText: confirmationText,
      denyButtonText: denyText,
    });
  }

编辑：已确认弃用 https://github.com/sweetalert2/sweetalert2/pull/1497 希望它能在某种程度上有所帮助

- Alexander Santos