问题
Currently working on a personal project. I want the user to click a button and a SweetAlert prompt would be presented for the user to verify their credential. However, the code I see on the SweetAlert website only allows one input field. Here is the code I have:
swal({
title: "Authenicating for continuation",
text: "Test",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something"
}, function(inputValue) {
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
// swal("Nice!", "You wrote: " + inputValue, "success");
});
So, is there a way I can get two input fields? One input field for the password and the other input field for text.
回答1:
As far as I know you can't do this off-the-shelf. You can either fork and implement, or just use a HTML element as a modal (e.g. as in Bootstrap's modals).
回答2:
Now SweetAlert2 is available: https://sweetalert2.github.io
As per their info on bottom:
Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters. Inside the preConfirm() function you can pass the custom result to the resolve() function as a parameter:
swal({
title: 'Multiple inputs',
html:
'<input id="swal-input1" class="swal2-input">' +
'<input id="swal-input2" class="swal2-input">',
preConfirm: function () {
return new Promise(function (resolve) {
resolve([
$('#swal-input1').val(),
$('#swal-input2').val()
])
})
},
onOpen: function () {
$('#swal-input1').focus()
}
}).then(function (result) {
swal(JSON.stringify(result))
}).catch(swal.noop)
回答3:
You can have inputs in the default SweetAlert type, as long as you set the html property to true. The issue is that unless the type is set to "input", SweetAlert adds a display: none to input fields.
It's a bit of a workaround, but you can change this in the js file from
<input type=\"text\" tabIndex=\"3\" />\n
to
<input id=\"swalInput\" type=\"text\" tabIndex=\"3\" />\n
And change the css file from
.sweet-alert input {
to
.sweet-alert #swalInput {
Then you can simply add your html to the text parameter when calling, like so:
swal({
title: "Log In to Continue",
html: true,
text: "Username: <input type='text'><br>Password: <input type='password'>"
});
This method simply specifies that the only input to be styled that way is the one generated by SweetAlert, so that any inputs you add to your text won't be affected by that styling.
回答4:
$(document).ready(function(){
$("a").click(function(){
swal({
title: "Teste",
text: "Test:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "User"
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("Error");
return false;
}
swal({
title: "Teste",
text: "E-mail:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Digite seu e-mail"
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("E-mail error");
return false;
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
});
});
});
回答5:
Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters. Notice that in preConfirm function you can pass the custom result to resolve():
You can do this using such manner:
swal({
title: 'Multiple inputs',
html:
'<h2>Login details for waybill generation</h2>'+
'<input id="swal-input1" class="swal2-input" autofocus placeholder="User ID">' +
'<input id="swal-input2" class="swal2-input" placeholder="Password">',
preConfirm: function() {
return new Promise(function(resolve) {
if (true) {
resolve([
document.getElementById('swal-input1').value,
document.getElementById('swal-input2').value
]);
}
});
}
}).then(function(result) {
swal(JSON.stringify(result));
})
}
The link here: https://limonte.github.io/sweetalert2/
回答6:
Multiple inputs aren't supported, you can achieve them by using HTML and preConfirm parameters.
Inside the preConfirm() function you can return (or, if async, resolve with) the custom result:
function sweetAlert(){
(async () => {
const { value: formValues } = await Swal.fire({
title: 'Multiple inputs',
html:
'<input id="swal-input1" class="swal2-input">' +
'<input id="swal-input2" class="swal2-input">',
focusConfirm: false,
preConfirm: () => {
return [
document.getElementById('swal-input1').value,
document.getElementById('swal-input2').value
]
}
})
if (formValues) {
Swal.fire(JSON.stringify(formValues))
}
})()
}body {
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.3.4/dist/sweetalert2.all.min.js"></script>
<button onclick="sweetAlert()">Try me!</button>Source: INPUT TYPES
回答7:
Here is an example using sweetalert@^2.1.0, showing one way to have multiple input fields. The example uses jQuery, but jQuery is not required for this technique to work.
// ==============================================================
//swal does not block, and the last swal wins
//so these swals are closed by later calls to swal, before you can see them
// ==============================================================
swal("aaa");
swal("bbb");
// ==============================================================
//for multiple inputs, use content: anHtmlElement
// ==============================================================
const div = document.createElement("div");
console.log(div);
$(div).html("first<input id='111' value='one'></input></br>second<input id='222' value='two'></input></br>third<input id='333' value='three'></input>");
swal({
title: "Three Inputs",
content: div,
// ==============================================================
//true means show cancel button, with default values
// ==============================================================
buttons: [true, "Do It"]
}).then(value => {
if (value) {
const outputString = `
value is true for confirm (i.e. OK); false for cancel
value: ${value}
` + $("#111").val() + " " + $("#222").val() + " " + $("#333").val();
// ==============================================================
// there are no open swals at this point, so another call to swal is OK here
// ==============================================================
swal(outputString);
} else {
swal("You cancelled");
}
});
alert("swal is not blocking: " + $("#111").val() + " " + $("#222").val() + " " + $("#333").val());
回答8:
check this out https://sweetalert2.github.io/
"AJAX request example" + "Chaining modals (queue) example" has inputs and you can work with them
回答9:
It's very simple through the preConfirm method and using ok button as submission button in sweetalert2
swal.fire({
showCancelButton:true,
html:`input1:<input id="input1" type="text">
input2: <input id="input2" type="text">
input3: <input id="input3" type="text">`,
preConfirm:function(){
in1= $('#input1').val();
in2= $('#input2').val();
in3 = $('#input3').val();
console.log(in1,in2,in3) // use user input value freely
}
})
回答10:
Yes you can!!!
swal({
title: "An input!",
text: "Write something interesting:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something"
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});
来源：https://stackoverflow.com/questions/31463649/sweetalert-prompt-with-two-input-fields