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

时间:2018-09-05 12:55:07

标签: javascript jquery sweetalert sweetalert2

我需要在用户未更改甜蜜警报内的文本框中的任何值时禁用确认按钮,并且仅在文本框中的值已更改但我似乎找不到办法时才启用它为了这。这是我的代码:

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

1 个答案:

答案 0 :(得分:3)

由于没有onInput或类似input: text的东西,您可以在getInput内使用onOpen并在其中添加一个 event侦听器相应地启用或禁用您的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>