I have a SweetAlert2 that allows text input, and I give it a default value. I'd like this default value to be highlighted when the alert pops up, so that the user can immediately overwrite it if needed. Here's an example:
And here is the function that I call with the sweetAlert options:
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){});
};
How would I go about doing this (if it's possible) ? I thought about using jQuery but I'm not sure how to get the reference to the sweetAlert dialogue. Any suggestions would be appreciated.
Here you go:
Swal.fire({
input: 'text',
inputValue: 'input value',
didOpen: () => {
const input = Swal.getInput()
input.setSelectionRange(0, input.value.length)
}
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
PS. Please note that SweetAlert2 and SweetAlert are two different projects with slight differences in API.
SweetAlert2 documentation: https://sweetalert2.github.io/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With