如何使用 jQuery 在甜蜜警報中添加 textarea 標簽作為輸入元素

Question

我不明白如何在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

感謝幫助。

Answer 1

您不能使用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>

Answer 2

最初的 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 的轉換很容易，這里是遷移指南。

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

在 codepen 上運行

如果可能，您也可以改用sweetalert2 （請參閱其他答案）。