我不明白如何添加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
感谢您的帮助。
原始的SweetAlert插件目前不受支持,您可能不会在其中看到文本区域功能。我创建了SweetAlert2,它具有textarea
功能:
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>
SweetAlert2 文档中↗的文本区域示例
从SweetAlert到SweetAlert2的过渡很容易,这是迁移指南。
您不能将textarea
用作类型,因为 sweetalert 不支持该类型。
模态的类型。SweetAlert带有4种内置类型,将显示相应的图标动画:"警告","错误","成功"和"信息"。您也可以将其设置为"输入"以获取提示模态。它可以放在"type"键下的对象中,也可以作为函数的第三个参数传递。(摘自此处)
相反,您可以通过将选项设置为 true 来将 html 标记与text
选项一起使用html
选项。但是通过这种方式,您无法在文本区域内获取值作为回调变量。为此,为文本区域提供一个 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>
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>
在 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);
});
在代码笔上运行它
如果可能的话,您也可以改用sweetalert2
(请参阅其他答案)。