web-dev-qa-db-ja.com

2つの入力フィールドを持つSweetAlertプロンプト

現在、個人プロジェクトに取り組んでいます。ユーザーにボタンをクリックしてもらい、ユーザーに資格情報を確認するためのSweetAlertプロンプトが表示されるようにします。ただし、SweetAlert Webサイトに表示されるコードでは、1つの入力フィールドのみが許可されています。ここに私が持っているコードがあります：

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

だから、2つの入力フィールドを取得する方法はありますか？パスワードの入力フィールドとテキストの入力フィールド。

javascriptpromptsweetalert
11
ballerz

私の知る限り、この既成のことはできません。 forkして実装するか、HTML要素をモーダルとして使用できます（例： Bootstrap's modals ）。

4
Michael Bar-Sinai

SweetAlert2が利用可能になりました： https://sweetalert2.github.io

下部の情報に従って：

複数の入力はサポートされていません。htmlおよびpreConfirmパラメーターを使用してそれらを実現できます。 preConfirm（）関数内で、カスタム結果をパラメーターとしてresolve（）関数に渡すことができます。

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)
21
Tikky

Htmlプロパティをtrueに設定する限り、デフォルトのSweetAlertタイプで入力を使用できます。問題は、タイプが「入力」に設定されていない限り、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をtextパラメーターに追加するだけです。

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

このメソッドは、そのようにスタイル設定される唯一の入力がSweetAlertによって生成されたものであることを単に指定するため、テキストに追加する入力はそのスタイルの影響を受けません。

7
DaftDeath
$(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"); 
            });
        });                 
    });
});
3
Igor Luciano

複数の入力はサポートされていません。htmlおよびpreConfirmパラメーターを使用してそれらを実現できます。 preConfirm関数では、カスタム結果をresolve（）に渡すことができます。

次のような方法でこれを行うことができます。

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/
2
Abhradip

これを確認してください https://sweetalert2.github.io/

「AJAX要求の例」+「連鎖モーダル（キュー）の例」には入力があり、それらを操作できます

0
user9083221

はい、できます!!!

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

PreConfirmメソッドを使用し、sweetalert2の送信ボタンとして[ok]ボタンを使用することで非常に簡単です。

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 
                     }
         })
0
ahmed maher

以下は、sweetalert @ ^ 2.1.0を使用した例で、複数の入力フィールドを持つ1つの方法を示しています。この例ではjQueryを使用していますが、この手法が機能するためにjQueryは必要ありません。

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