在sweetAlert中输入文本

Question

我正在使用sweetalert的自定义版本来询问我的用户input.我已经设法使一切工作,但有一个奇怪的行为,为了能够在输入框中输入文本,你必须先点击屏幕:

swal({
    title: "Aggiornamento profilo",
    text: '<br /><form method="post" id="taxcode-update" name="taxcodeUpdate"><input id="admin-tax-code" minlength="3" class="form-control wedding-input-text wizard-input-pad" type="text" name="taxCode" placeholder="Codice fiscale"></form>',
    type: "warning",
    showCancelButton: false,
    confirmButtonText: "Aggiorna il mio profilo",
    closeOnConfirm: false
}, function () {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

工作示例:https://jsfiddle.net/fvkppx06/

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

Answer 2

使用Sweetalert2。有对被发现输入提示的例子不胜枚举这里，所有的人都用现代异步/ AWAIT结构。如果你想要旧的方式，试试这个：

Swal.fire({
    title: "An input!",
    text: "Write something interesting:",
    input: 'text',
    showCancelButton: true        
}).then((result) => {
    if (result.value) {
        console.log("Result: " + result.value);
    }
});

Answer 3

JSFiddle

给input的autofocus标签。

text: '<br /><form method="post" id="taxcode-update" name="taxcodeUpdate">'
    + '<input id="admin-tax-code" autofocus minlength="3" class="form-control wedding-input-text wizard-input-pad" type="text" name="taxCode" placeholder="Codice fiscale">'
    + '</form>',