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种内置类型，可显示相应的图标动画：“警告”，“错误”，“成功”和“信息”。您也可以将其设置为“input”以获得提示模式。它可以放在键“type”下的对象中，也可以作为函数的第三个参数传递。（ Taken from here ）

相反，您可以通过将text选项设置为true来使用带有html选项的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功能。我创建了SweetAlert2，其textarea功能：

＆＃13;

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

＆＃13;

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

＆＃13;

Textarea example in SweetAlert2 documentation ↗

从SweetAlert到SweetAlert2的过渡很简单，这里是migration guide。

Answer 3

如果您正在使用sweetalert2或想要使用sweetalert2，则可以包括以下内容：

h2o.cor()

function openSwal(){
  swal({
      title: "Are you sure you want write somethin' in text area?",
      input: "textarea",
      inputPlaceholder: "Enter somethinn",
      showCancelButton: true,
      cancelButtonText: 'Cancel',
      confirmButtonText: "Submit ",
      inputValidator: function(value) { // validates your input
        return new Promise(function(resolve, reject) {
          if (value != '' && value != null) {
            // document.getElementById('closeComment').value = value; // assign this to other elements in your form
            swal("Success!", "You comment: " + value, "success");
            // call other functions or do an AJAX call or sumbit your form
          }
          else {
            reject('Please enter a valid text');
          }
        });
      }
    })
  }

您可以写文本区域而不是文本

Answer 4

在sweetalert1中，不再支持html: true（因此，已接受的答案不再起作用）。相反，您可以使用以下方法手动获取文本区域的值：

value = document.querySelector(".swal-content__textarea").value

完整代码：

swal({
  text: "Enter some text :",
  content: { element: "textarea" },
  buttons: "Next"
}).then((value) => {
  if (!value) throw null;
  value = document.querySelector(".swal-content__textarea").value;
  alert("you entered: " + value);
});

Run it on codepen

如果可能，您也可以改用sweetalert2（请参阅其他答案）。

如何使用jQuery

4 个答案: