SweetAlert中如何突出显示默认文本输入?

9
我有一个使用SweetAlert2的文本输入框,我设置了默认值。我希望在弹出警告时突出显示默认值,以便用户可以立即覆盖它(如果需要)。以下是示例:

enter image description here

这是我使用sweetAlert选项调用的函数:
window.sweetPrompt = function (title, message, callback, input, keepopen, allowOutsideClick, allowEscapeKey) {
    sweetAlert({
        title: title,
        text: message,
        input: 'text',
        confirmButtonColor: "#428bca",
        preConfirm: function(text) {
            return new Promise(function(resolve) {
                if (!keepopen) {
                    resolve();
                } else {
                    callback(text);
                }
            });
        },
        inputValidator: function(text) {
            return new Promise(function (resolve, reject) {
                if (text) {
                    resolve();
                } else {
                    reject('Cannot be empty!');
                }
            });
        },
        inputValue: input,
        showCancelButton: true,
        reverseButtons: true,
        allowOutsideClick: allowOutsideClick,
        allowEscapeKey: allowEscapeKey
    }).then(callback, function(dismiss){});
};

我该如何实现这个功能(如果可能的话)?我考虑使用jQuery,但我不确定如何获取到sweetAlert对话框的引用。任何建议都将不胜感激。
1个回答

14

这是您需要的内容:

Swal.fire({
  input: 'text',
  inputValue: 'input value',
  didOpen: () => {
    Swal.getInput().select()
  }
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

PS. 请注意,SweetAlert2和SweetAlert是两个不同的项目,API略有不同。

SweetAlert2文档:https://sweetalert2.github.io/


1
为什么不使用input.select()而是使用input.setSelectionRange(0, input.value.length)?我认为它们具有相同的效果。 - Amr

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接