Jak dodać znacznik textarea jako elementu wejściowego w słodkim wpisu za pomocą jQuery

Question

Nie rozumiem jak dodać textarea typ w sweet alertu. podobne do 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"); 
     }); 
}); 

To działa prawidłowo. Ale jeśli mogę użyć type: "textarea" zamiast type: "input"

To daje błąd jak poniżej:

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

Dzięki za pomoc.

Answer 1

Nie można używać textarea jako typu, ponieważ sweetalert nie obsługuje tego.

Typ modalu. SweetAlert ma 4 wbudowane typy, które pokażą odpowiednią animację ikony: "ostrzeżenie", "błąd", "sukces" i "informacje". Można również ustawić go jako "input", aby uzyskać modalny monit. To może być albo umieścić w obiekcie pod klucz „typ” lub przekazywane jako trzeci parametr funkcji. (Taken from here)

---

Zamiast tego można używać znaczników HTML z text opcji poprzez ustawienie html opcja true. Ale w ten sposób nie można uzyskać wartości wewnątrz textarea jako zmiennej wywołania zwrotnego. W tym celu podaj identyfikator do textarea i skorzystaj z tej wartości.

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

Original SweetAlert Wtyczka jest obecnie nieobsługiwane prawdopodobnie nie będzie widać funkcjonalność textarea w nim. Stworzyłem SweetAlert2 który ma textarea functionlaity:

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 ↗

Przejście z SweetAlert do SweetAlert2 jest proste, oto migration guide.