17

目前从事个人项目。我希望用户单击一个按钮，然后会出现一个 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");
});

那么，有没有办法获得两个输入字段？一个输入字段用于密码，另一个输入字段用于文本。

4

14 回答 14

34

现在 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)
于 2017-03-30T07:32:41.353 回答
8

只要将 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 生成的输入，因此您添加到文本中的任何输入都不会受到该样式的影响。

于 2016-04-11T14:23:42.600 回答
7

据我所知，你不能这样做现成的。您可以 fork 和实现，或者只使用 HTML 元素作为模式（例如，在Bootstrap 的模式中）。

于 2015-07-16T20:27:01.670 回答
7

不支持多输入，可以使用HTML和preConfirm参数实现。在preConfirm()函数内部，您可以返回（或者，如果是异步的，则使用解析）自定义结果：

function sweetAlert(){
  (async () => {

  const { value: formValues } = await Swal.fire({
    title: 'Multiple inputs',
    html:
      '<input id="swal-input1" class="swal2-input">' +
      '<input id="swal-input2" class="swal2-input">',
    focusConfirm: false,
    preConfirm: () => {
      return [
        document.getElementById('swal-input1').value,
        document.getElementById('swal-input2').value
      ]
    }
  })

  if (formValues) {
    Swal.fire(JSON.stringify(formValues))
  }

  })()
}
body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.3.4/dist/sweetalert2.all.min.js"></script>


<button onclick="sweetAlert()">Try me!</button>

来源：输入类型

于 2019-11-19T12:42:16.007 回答
4

使用 Tikky 在上面的答案中发布的示例，并基于要求对该答案进行验证的问题。您可以尝试以下方法来对此方法进行验证：

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) {
                    // Validate input
                    if ($('#swal-input1').val() == '' || $('#swal-input2').val() == '') {
                        swal.showValidationMessage("Enter a value in both fields"); // Show error when validation fails.
                        swal.enableConfirmButton(); // Enable the confirm button again.
                    } else {
                        swal.resetValidationMessage(); // Reset the validation message.
                        resolve([
                            $('#swal-input1').val(),
                            $('#swal-input2').val()
                        ]);
                    }
                })
            },
            onOpen: function () {
                $('#swal-input1').focus()
            }
        }).then(function (result) {
            // If validation fails, the value is undefined. Break out here.
            if (typeof(result.value) == 'undefined') {
                return false;
            }
            swal(JSON.stringify(result))
        }).catch(swal.noop)
于 2020-06-07T11:59:29.037 回答
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

通过 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 
                     }
         })
于 2019-05-09T04:10:05.693 回答
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 回答
1

在 SweetAlert 2.x 上，您可以使用这个 vanilla Javascript 来获取/设置一个输入。你可以将更多元素链接到内容，这样你就可以有多个输入：

  var slider = document.createElement("input");
      slider.type = "number";
      slider.value = 5;
      slider.step=1;
      slider.min = 5;
      slider.max = 50;

      this.swal({
        title: 'Request time to XXX',
        text: 'Select values',
        content: slider,
        buttons: {
          cancel: "Run away!",
          catch: {
            text: "Throw Pokéball",
            value: slider.value,
          },
          defeat: true,
        }
      }).then((value) => {
        console.log(slider.value); // Here you receive the input data value
        //swal(`You typed: ${value}`);
      });
于 2020-06-01T07:16:33.093 回答
1

这是一个使用 sweetalert@^2.1.0 的示例，展示了一种拥有多个输入字段的方法。该示例使用 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());
于 2018-03-29T12:54:54.767 回答
0

Asp.Net Core MVC 中的电子邮件和密码登录双输入框，使用 ajax 清除应用程序会话并重新登录以重新分配会话。应在 javascript 中调用“sweetModal”函数，以触发 sweetalert 模式弹出窗口的应用程序 5 分钟空闲计时器触发器。调整以适合您的需要。请注意，这适用于https://sweetalert.js.org/的 SweetAlert 2.0和 jQuery v3.5.1

sweetModal = () => {
swal({
    icon: '../../../images/yourlogo.png',
    title: 'Relogin',
    content: {
        element: "input",
        attributes: {
            placeholder: "Enter username",
        },
    },
    buttons: {
        confirm: {
            text: "Submit",
            value: true,
            visible: true,
            className: "",
            closeModal: false
        },
        cancel: {
            text: "Cancel",
            value: null,
            visible: true,
            className: "",
            closeModal: true
        },
    },
    closeOnClickOutside: false,
    closeOnEsc: false,
})
.then((user) => {
    if (user) {
        swal({
            icon: '../../../images/yourlogo.png',
            title: 'Relogin',
            content: {
                element: "input",
                attributes: {
                    placeholder: "Enter password",
                    type: "password",
                },
            },
            buttons: {
                confirm: {
                    text: "Submit",
                    value: true,
                    visible: true,
                    className: "",
                    closeModal: false
                },
                cancel: {
                    text: "Cancel",
                    value: null,
                    visible: true,
                    className: "",
                    closeModal: true
                },
            },
            closeOnClickOutside: false,
            closeOnEsc: false,
        })
        .then((pwd) => {
            if (pwd) {
                $.post("/account/refreshsession", { user: user, pwd: pwd }, () => swal(`Successful!`));
                //swal(`The returned value is: ${user} ${pwd}`);
            }
        });
    }
});

}

于 2020-12-14T07:16:07.657 回答
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 回答
0

看看这个 https://sweetalert2.github.io/

“AJAX 请求示例”+“链接模式（队列）示例”有输入，您可以使用它们

于 2019-02-18T14:28:45.263 回答
-1

是的你可以！！！

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");
                });
于 2017-11-22T16:07:26.200 回答