Richiesta SweetAlert con due campi di input

Question

Attualmente sta lavorando a un progetto personale. Voglio che l'utente faccia clic su un pulsante e che venga presentata una richiesta di SweetAlert affinché l'utente possa verificarne le credenziali. Tuttavia, il codice che vedo sul sito Web di SweetAlert consente solo un campo di input. Ecco il codice che ho:

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"); 
}); 

Quindi, c'è un modo per ottenere due campi di input? Un campo di input per la password e l'altro campo di input per il testo.

Answer 1

Per quanto ne so non si può fare questo in pronta consegna. Puoi utilizzare fork e implementare oppure utilizzare semplicemente un elemento HTML come modale (ad esempio, come in Bootstrap's modals).

Answer 2

$(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"); 
      }); 
     });     
    }); 
}); 

Answer 3

È possibile avere input nel tipo predefinito SweetAlert, purché la proprietà html sia impostata su true. Il problema è che, a meno che il tipo sia impostato su "input", SweetAlert aggiunge uno display: none ai campi di input.

E 'un po' di una soluzione, ma è possibile cambiare questo nel file js da

<input type=\"text\" tabIndex=\"3\" />\n 

a

<input id=\"swalInput\" type=\"text\" tabIndex=\"3\" />\n 

e modificare il file css da

.sweet-alert input { 

a

.sweet-alert #swalInput { 

Poi si può semplicemente aggiungere il tuo html per il parametro del testo quando si chiama, in questo modo:

swal({ 
    title: "Log In to Continue", 
    html: true, 
    text: "Username: <input type='text'><br>Password: <input type='password'>" 
}); 

Questo metodo specifica semplicemente che l'unico input per essere in stile in questo modo è quello generato da SweetAlert, in modo che qualsiasi gli input che aggiungi al tuo testo non saranno influenzati da questo stile.

Answer 4

Non sono supportati più ingressi, è possibile raggiungerli utilizzando i parametri html e preConfirm. Si noti che nella funzione preConfirm è possibile passare il risultato personalizzato per risolvere():

È possibile farlo utilizzando tale maniera:

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/ 

Answer 5

Ora, SweetAlert2 è disponibile: https://limonte.github.io/sweetalert2/

Come da le loro informazioni sul fondo:

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) 

Answer 6

Sì, puoi !!!

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"); 
       });