Come aggiungere tag textarea come elemento di input in allerta utilizzando jQuery

Question

Non capisco come aggiungere un textarea tipo nell'avviso sweet. Simile a 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"); 
     }); 
}); 

Questo funziona bene. Ma se io uso type: "textarea" invece di type: "input"

Questo dà errore come questo:

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

Grazie per l'aiuto.

Answer 1

Non è possibile utilizzare textarea come tipo poiché sweetalert non lo supporta.

Il tipo di modale. SweetAlert viene fornito con 4 tipi built-in che mostrano un'animazione icona corrispondente: "warning", "error", "success" e "info". È anche possibile impostarlo come "input" per ottenere una modal prompt. Si può o essere messo in oggetto sotto il "tipo" tasto o passato come terzo parametro della funzione. (Taken from here)

---

Invece è possibile utilizzare l'HTML markup con text opzione impostando html opzione vera Ma in questo modo non è possibile ottenere valore all'interno della textarea come variabile di callback. Per questo dare un id alla textarea e ottenere valore usando quello.

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 originale plugin è attualmente supportato una che probabilmente non vedrà la funzionalità textarea in esso. Ho creato SweetAlert2 che ha la 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 ↗

Transizione da SweetAlert a SweetAlert2 è facile, ecco la migration guide.