如何使用 jQuery 在 sweet alert 中添加 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 不支持它。

The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function.(Taken from here)

相反，您可以通过将 html 选项设置为真来使用 html 标记和 text 选项。但是通过这种方式，您无法在文本区域内获取值作为回调变量。为此，给文本区域一个 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：

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@11"></script>

Textarea example in SweetAlert2 documentation ↗

从 SweetAlert 到 SweetAlert2 的转换很简单，这里是 migration guide。

Answer 3

您可以使用 input: "textarea" 而不是 input: "text" 如果您正在使用 sweetalert2 或想使用 sweetalert2，您可以包括这些：

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');
          }
        });
      }
    })
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.min.js"></script>
<button id="something" onclick="openSwal();">Open Sweet Alert</button>

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 在 sweet alert 中添加 textarea 标签作为输入元素

How to add textarea tag as input element in sweet alert using jQuery

html

javascript

css

jquery

sweetalert