logo标签列表

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

javascriptjqueryhtmlcsssweetalert
9

我不知道如何在 sweet alert 中添加 textarea 类型。 类似于 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

感谢您的帮助。

展示你所编写的代码... - Guruprasad J Rao
$('#saveBtn,#createNewBtn').click(function(){ swal({
title: "请输入您的姓名！",
text: "您的姓名:",
type: "input",
showCancelButton: true,
closeOnConfirm: false, showLoaderOnConfirm: true, animation: "slide-from-top",
inputPlaceholder: "写点什么" }, function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") { swal.showInputError("您需要写点东西！");
return false } swal("好极了！", "您输入的是：" + inputValue, "success"); }); }); - Prafull Pol
@Guruprasad。您能告诉我我哪里出错了吗？ - Prafull Pol
4个回答
18

原始的SweetAlert插件目前不受支持，您可能不会在其中看到文本区域功能。我创建了SweetAlert2，它具有

16

由于 sweetalert 不支持使用 textarea 作为类型，因此您不能将其用作类型。

模态框的类型。SweetAlert 带有 4 种内置类型，每种类型都会显示相应的图标动画："warning"、"error"、"success" 和 "info"。您还可以将其设置为"input"，以获取提示模态框。它可以放在对象中的键"type"下，也可以作为函数的第三个参数传递。（摘自这里）

相反，您可以通过将 html 选项设置为 true，使用带有 text 选项的 HTML 标记。但是这样做无法获取回调变量中文本区域内的值。为此，请为文本区域指定一个 ID，并使用该 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>

1
好主意，和我一起工作过，一个要点：我认为我们不再需要inputValue了，也不需要检查，因为它永远不会获得值。 - Amr Elgarhy
3
你可以使用 input: "textarea" 替代 input: "text"。 如果你正在使用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>

1
在 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);
});

在codepen上运行它

如果可能的话，您也可以使用sweetalert2（请参见其他答案）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接