jQueryを使用してスワップアラートの入力要素としてtextareaタグを追加する方法

Question

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

と同様 これが正常に動作します。助けのための

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

ありがとう：私はtype: "textarea"代わりのtype: "input"

を使用している場合でも、これは、このようなエラーを与えます。

Answer 1

textareaをタイプとして使用することはできません。

モーダルのタイプ。 SweetAlertには、対応するアイコンのアニメーション「警告」、「エラー」、「成功」、「情報」が表示される4種類のビルトインタイプが用意されています。また、"入力"と設定して、プロンプトモーダルを得ることもできます。これは、どちらかのキー「タイプ」の下のオブジェクトに入れたり、関数の3番目のパラメータとして渡すことができます。（Taken from here）

---

代わりにあなたがhtmlを設定することにより、textオプションでHTMLマークアップを使用することができますオプションはtrueです。しかし、このようにして、コールバック変数としてテキストエリア内で値を取得することはできません。そのためには、テキストエリアに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プラグインは、現在サポートされていませANあなたはおそらくそれでテキストエリアの機能は表示されません。 SweetAlertからSweetAlert2へ

swal({ 
 
    title: 'Input something', 
 
    input: 'textarea' 
 
}).then(function(text) { 
 
    if (text) { 
 
    swal(text) 
 
    } 
 
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.6/sweetalert2.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.6/sweetalert2.js"></script>

Textarea example in SweetAlert2 documentation ↗

の移行が簡単ですが、ここでmigration guideだ：私はtextarea functionlaityを有しているSweetAlert2を作成しました。