SweetAlert invite avec deux champs de saisie

Comme je sais que vous ne pouvez pas faire ce hors-the-shelf. Vous pouvez soit fourchette et mettre en œuvre, ou tout simplement utiliser un élément HTML comme un modal (par exemple dans Bootstrap est modals).

OriginalL'auteur Michael Bar-Sinai

Vous pouvez avoir des entrées dans le répertoire par défaut SweetAlert type, aussi longtemps que vous définissez la propriété html pour vrai. Le problème est que, à moins que le type est réglé sur "entrée", SweetAlert ajoute un display: none pour les champs de saisie.

C'est un peu une solution de contournement, mais vous pouvez le modifier dans le fichier js de

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

à

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

Et de modifier le fichier css de

.sweet-alert input {

à

.sweet-alert #swalInput {

Alors vous pouvez simplement ajouter votre code html pour le texte de paramètre lors de l'appel, comme suit:

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

Cette méthode spécifie simplement que la seule entrée pour être style c'est celui généré par SweetAlert, de sorte que toutes les entrées que vous ajoutez à votre texte ne sera pas affectée par ce style.

OriginalL'auteur DaftDeath

Entrées multiples ne sont pas pris en charge, vous pouvez réaliser à l'aide de html et preConfirm paramètres.
Remarquez que dans preConfirm fonction, vous pouvez passer la douane résultat à résoudre():

Vous pouvez le faire à l'aide d'une telle manière:

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/

OriginalL'auteur Abhradip

Voici un exemple d'utilisation de sweetalert@^2.1.0, affichant une façon d'avoir plusieurs champs de saisie. L'exemple utilise jQuery, mais jQuery est pas nécessaire pour cette technique fonctionne.

//==============================================================
//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());

OriginalL'auteur Stan