javascript - Sweet Alert with form JS (3 input)

Question

我想在 sweet alert 中实现一个表单。我可以只在里面放一个输入，包括标题和正文。

有一种方法可以自定义警报，文档说，但不允许从我的框架 (customizecss.com) 或我的 style.css 加载类 css3。

我正在尝试通过这种方式在警报中包含一个输入:

swal({
       title: "HTML <small>Title</small>!",
       text: "<input type='text'><label class='my-label'>Name</label>",
       html: true 
});

它不起作用，只显示标签...为什么？

请问有没有什么办法...

谢谢!

甜蜜警报 -> https://github.com/t4t5/sweetalert

Answer 1

你可以使用这个插件来实现你想要的:

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

它以语法友好的方式在模式中创建表单:

 swal.withForm({
    title: 'More complex Swal-Forms example',
    text: 'This has different types of inputs',
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Get form data!',
    closeOnConfirm: true,
    formFields: [
      { id: 'name', placeholder: 'Name Field' },
      { id: 'nickname', placeholder: 'Add a cool nickname' },
      { id: 'password', type: 'password' },

      { name: 'sex', value: 'Male', type: 'radio' },
      { name: 'sex', value: 'Female', type: 'radio' },

      { name: 'skills', value: 'JS', type: 'checkbox' },
      { name: 'skills', value: 'Ruby', type: 'checkbox' },
      { name: 'skills', value: 'Java', type: 'checkbox' },

      { id: 'select',
        type: 'select',
        options: [
          {value: 'test1', text: 'test1'},
          {value: 'test2', text: 'test2'},
          {value: 'test3', text: 'test3'},
          {value: 'test4', text: 'test4'},
          {value: 'test5', text: 'test5'}
        ]}
    ]
  }, function (isConfirm) {
    // do whatever you want with the form data
    console.log(this.swalForm) // { name: 'user name', nickname: 'what the user sends' }
  })