17

現在、個人的なプロジェクトに取り組んでいます。ユーザーがボタンをクリックすると、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 つの入力フィールドを取得する方法はありますか? 1 つの入力フィールドはパスワード用で、もう 1 つの入力フィールドはテキスト用です。

4

14 に答える 14

8

html プロパティを true に設定している限り、デフォルトの SweetAlert タイプで入力を行うことができます。問題は、タイプが「入力」に設定されていない限り、SweetAlert がdisplay: none入力フィールドに a を追加することです。

これはちょっとした回避策ですが、次の 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 によって生成された入力のみがそのようにスタイル設定されることを指定するだけなので、テキストに追加する入力はそのスタイル設定の影響を受けません。

于 2016-04-11T14:23:42.600 に答える
3 
$(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"); 
            });
        });                 
    });
});
于 2015-11-19T12:10:19.873 に答える
2

複数の入力はサポートされていません。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/
于 2016-08-31T11:43:29.843 に答える
0

この方法を試してください

swal({
  text: 'First Input',
  content: "input",
  button: {
    text: "Add New",
    closeModal: false,
  },
})
.then(name => {
    swal({
        text: 'Second Input',
        content: "input",
        button: {
        text: "Add New",
            closeModal: false,
        },
    }).then(id => {
      //save code here.
    }) 
}).catch(err => { 
    swal("Error");
});
于 2020-05-01T08:20:25.647 に答える