[英]How to add textarea tag as input element in sweet alert using jQuery
我不明白如何在sweet
警报中添加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
感谢帮助。
您不能使用textarea
作为类型,因为 sweetalert 不支持。
模态的类型。 SweetAlert 带有 4 种内置类型,它们将显示相应的图标动画:“警告”、“错误”、“成功”和“信息”。 您也可以将其设置为“输入”以获得提示模式。 它既可以放在键“type”下的对象中,也可以作为函数的第三个参数传递。(取自here )
相反,您可以通过将html
选项设置为 true 来使用带有text
选项的 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>
最初的 SweetAlert 插件目前不受支持,您可能不会在其中看到 textarea 功能。 我创建了具有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>
SweetAlert2 文档中的 Textarea 示例 ↗
从 SweetAlert 到 SweetAlert2 的转换很容易,这里是迁移指南。
您可以使用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
(请参阅其他答案)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.