如何在甜蜜警报 2 中的输入上启用确认按钮

Question

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

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

Answer 1

由于没有onInput或类似的东西input: text，您可以在onOpen中使用getInput并向其添加事件侦听器以相应地启用或禁用您的button。

检查工作片段。

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>

Answer 2

我们可以通过getConfirmButton和didOpen启用/禁用确认按钮(这部分不在文档中(

甜蜜警报2 v11

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