Default text input highlighting in sweetAlert
I have a SweetAlert2 that allows text input and I give it a default. I would like this default to be highlighted when the warning occurs so that the user can immediately overwrite it if needed. Here's an example:
And here is the function I am calling using sweetAlert parameters:
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 will I do this (if possible)? I was thinking about using jQuery, but I'm not sure how to get the sweetAlert dialog link. Any suggestions would be appreciated.
+3
source to share
1 answer
Here you go:
swal({
input: 'text',
inputValue: 'input value',
onOpen: function() {
var input = swal.getInput()
input.setSelectionRange(0, input.value.length)
}
})
<script src="https://unpkg.com/sweetalert2@7.7.0/dist/sweetalert2.all.js"></script>
PS. Please note that SweetAlert2 and SweetAlert are two different projects with slight API differences.
SweetAlert2 documentation: https://sweetalert2.github.io/
+2
source to share