如何使用jQuery在texit中添加textarea标签作为输入元素

Question

我不明白如何textarea在sweet警报中添加类型.相近type: "input"

$('#saveBtn).click(function(){
    swal({   
        title: "Enter your Name!",  
        text: "your name:",  
        type: "input",   
        showCancelButton: true,   
        closeOnConfirm: false, 
        showLoaderOnConfirm: true,
        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"); 
         });
});

这很好用.但如果我用 type: "textarea"而不是type: "input"

这给出了这样的错误:

sweetalert.min.js:1 Uncaught ReferenceError: logStr is not defined

感谢帮助.

Answer 1

你不能使用textarea类型,因为sweetalert不支持.

模态的类型.SweetAlert附带4种内置类型,可显示相应的图标动画:"警告","错误","成功"和"信息".您也可以将其设置为"输入"以获得提示模式.它可以放在键"type"下的对象中,也可以作为函数的第三个参数传递.(取自这里)

相反,您可以text通过设置html选项true 来使用html标记和选项.但是这样你就无法在textarea中获得值作为回调变量.为此,给textarea一个id并使用它获取值.

swal({
  title: "Enter your Name!",
  text: "<textarea id='text'></textarea>",
  // --------------^-- define html element with id
  html: true,
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
  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
  }
  // get value using textarea id
  var val = document.getElementById('text').value;
  swal("Nice!", "You wrote: " + val, "success");
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>

Answer 2

目前不支持原始的SweetAlert插件,您可能不会在其中看到textarea功能.我创建了具有功能性的SweetAlert2textarea:

Swal.fire({
  title: 'Input something',
  input: 'textarea'
}).then(function(result) {
  if (result.value) {
    Swal.fire(result.value)
  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

SweetAlert2文档中的Textarea示例↗

从SweetAlert到SweetAlert2的过渡很简单,这是迁移指南.