SweetAlert приглашение с двумя полями ввода

Question

В настоящее время работает над личным проектом. Я хочу, чтобы пользователь нажал кнопку, и приглашение SweetAlert будет представлено пользователю для проверки их учетных данных. Однако код, который я вижу на веб-сайте SweetAlert, разрешает только одно поле ввода. Вот код, который у меня есть:

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

Итак, есть ли способ получить два поля ввода? Одно поле ввода для пароля и другое поле ввода для текста.

Answer 1

Насколько я знаю, вы не можете сделать это готово. Вы можете либо использовать fork и реализовать, либо просто использовать HTML-элемент как модальный (например, как в 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

У вас могут быть входные данные по умолчанию SweetAlert, если вы установите для свойства html значение true. Проблема заключается в том, что если тип не установлен на «input», SweetAlert добавляет display: none к полям ввода.

Это немного обходной путь, но вы можете изменить это в файле JS от

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

в

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

И изменить файл CSS от

.sweet-alert input { 

в

.sweet-alert #swalInput { 

Тогда вы можете просто добавить HTML к параметру текста при вызове, например, так:

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

Этот метод просто указывает, что единственный вход стилизовать таким образом это один порожденный SweetAlert, так что любой Этот стиль не повлияет на материалы, которые вы добавляете к тексту.

Answer 4

Несколько входов не поддерживаются, их можно достичь с помощью параметров html и preConfirm. Обратите внимание, что в функции preConfirm вы можете передать пользовательский результат для разрешения():

Вы можете сделать это, используя такой способ:

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

Теперь SweetAlert2 доступна: https://limonte.github.io/sweetalert2/

В соответствии с их информация о дне:

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

Да, вы можете !!!

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