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

我不明白如何添加

textarea

类型 在

sweet

警报中。 类似于

类型：“输入”

$('#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"); 
         });
});

这个很好用。但是如果我使用

键入：“textarea”

而不是

键入：“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"); 
         });
});

这会产生如下错误：

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

---

谢谢您的帮助。

您不能将

textarea

用作类型，因为sweetalert不支持该功能

模态的类型。SweetAlert附带4种内置类型，将显示相应的图标动画：“警告”、“错误”、“成功”和“信息”。您还可以将其设置为“输入”，以获得提示模式。它可以放在“type”键下的对象中，也可以作为函数的第三个参数传递。（）

---

相反，您可以通过将

html

选项设置为true，将html标记与

text

选项一起使用。但是，通过这种方式，您无法在textarea中获取值作为回调变量。为此，给textarea一个id，并使用该id获取值

swal({
标题：“输入您的姓名！”，
正文：“，
//--------------------^--定义id为的html元素
是的，
showCancelButton:true，
CloseOnConfig:false，
请确认：正确，
动画：“从顶部滑动”，
输入占位符：“写点东西”
}，函数（输入值）{
if（inputValue==false）返回false；
如果（inputValue==“”）{
swal.showInputError（“你需要写点东西！”）；
返回错误
}
//使用textarea id获取值
var val=document.getElementById（'text'）。值；
斯瓦尔（“很好！”，你写道：“+val，“成功”）；
});
原来的SweetAlert插件目前不受支持，您可能看不到其中的textarea功能。我创建了一个具有
textarea
功能的：


Swal.fire({
标题：“输入某物”，
输入：“文本区域”
}).然后（函数（结果）{
if（result.value）{
喷水灭火（结果值）
}
})
您可以使用
输入：“textarea”
而不是
输入：“text”
如果您正在使用sweetalert2或希望使用sweetalert2，您可以包括以下内容：


函数openSwal（）{
游泳({
标题：“您确定要在文本区域中写入内容吗？”，
输入：“文本区域”，
输入占位符：“输入somethinn”，
showCancelButton:true，
cancelButtonText:“取消”，
confirmButtonText：“提交”，
inputValidator:函数（值）{//验证您的输入
返回新承诺（功能（解决、拒绝）{
如果（值！=''&&value！=null）{
//document.getElementById（'closeComment'）。value=value；//将其分配给表单中的其他元素
swal（“成功！”，你评论：“+价值”，“成功”）；
//调用其他函数，或者执行AJAX调用，或者对表单进行sumbit
}
否则{
拒绝（“请输入有效文本”）；
}
});
}
})
}

在
sweetalert1
中打开sweetalert

，不再支持

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

---

如果可能的话，您也可以使用

sweetalert2

。

显示您的编码…$（'#saveBtn，#createNewBtn'）。单击（函数（）{swal（{title:“输入您的姓名！”，文本：“您的姓名：”，键入：“输入”，showCancelButton:true，CloseOnConfig:false，showLoaderOnConfirm:true，动画：“从顶部滑动”，inputPlaceholder：“写入内容”}，函数（inputValue）{if（inputValue==false）返回false；if（inputValue==”）{swal.showInputError（“您需要写入内容！”）return false}swal（“Nice！”，您写道：“+inputValue，“success”）；}）@古鲁帕萨德。你能告诉我我在哪里做错事吗好主意，和我一起工作，有一点：我认为我们不再需要输入值，也不需要检查，因为它永远不会得到值。