javascript 在sweetAlert中输入文本

yebdmbv4  于 2023-02-15  发布在  Java
关注(0)|答案(7)|浏览(255)

我正在使用一个自定义版本的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/

rta7y2nd

rta7y2nd1#

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 === null) return false;
  
  if (inputValue === "") {
    swal.showInputError("You need to write something!");
    return false
  }
  
  swal("Nice!", "You wrote: " + inputValue, "success");
});
nc1teljy

nc1teljy2#

使用Sweetalert 2。这里有很多输入提示的例子,它们都使用了现代的async/await结构。如果你想用老方法,试试这个:

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

sg24os4d3#

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>',
3pmvbmvn

3pmvbmvn4#

使用的变量为“name”

const {value: name} = await swal({
  title: 'Input your name',
  input: 'text',
  inputPlaceholder: 'Enter here'
})

if (name) {
  swal('Entered name: ' + name)
}
omvjsjqw

omvjsjqw5#

先测试一下

swal.withForm({
   title: 'Cool example',
   text: 'Any text that you consider useful for the form',
   showCancelButton: true,
   confirmButtonColor: '#DD6B55',
   confirmButtonText: 'Get form data!',
   closeOnConfirm: true,
   formFields: [
       { id: 'name', placeholder:'Name Field' },
       { id: 'nickname', placeholder:'Add a cool nickname' }
   ], function(isConfirm) {
   // do whatever you want with the form data
   console.log(this.swalForm); // { name: 'user name', nickname: 'what the user sends' }
})

https://github.com/taromero/swal-forms

am46iovg

am46iovg6#

使用此命令:

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

rseugnpd7#

SweetAlert有一个div,tabIndex ="-1",这是我的问题,所以,如果你去检查,它显示tabIndex ="-1"在"第一个div"内(它应该在那里),你可以使用下一行获得HTMLELEMENT:

let div = document.getElementsByClassName("fade modal-lg modal show");

然后验证是否有内容:

console.log(div, "div");

一旦你到了那里,下面是我的工作:
一个二个一个一个
我希望这能有所帮助:d(我花了4个小时寻找这个)

相关问题