Lunghezza massima per HTML <textarea>
-
09-06-2019 - |
Domanda
Come limitare il numero massimo di caratteri che possono essere immessi in un codice HTML <textarea>
?Sto cercando una soluzione cross-browser.
Soluzione
IL TEXTAREA
il tag non ha un file MAXLENGTH
attribuire il modo in cui anINPUT
tag lo fa, almeno non nella maggior parte dei browser standard.Un modo molto semplice ed efficace per limitare il numero di caratteri che possono essere digitato in un TEXTAREA
l'etichetta è:
<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>
Nota: onKeyPress
, impedirà la pressione di qualsiasi pulsante, qualsiasi pulsante Compreso il tasto backspace.
Funziona perché l'espressione booleana confronta la lunghezza del campo prima che il nuovo carattere venga aggiunto alla lunghezza massima desiderata (50 in questo esempio, usa il tuo qui) e restituisce vero se c'è spazio per un altro, false
altrimenti.Restituendo false dalla maggior parte degli eventi si annulla l'azione predefinita.Quindi, se la lunghezza corrente è già 50 (o più), il gestore restituisce falso, il KeyPress
l'azione viene annullata e il personaggio non viene aggiunto.
Un neo è la possibilità di incollare in a TEXTAREA
, che non causa il KeyPress
evento da attivare, aggirando questo controllo.Internet Explorer 5+ contiene un onPaste
Evento il cui gestore può contenere il controllo.Tuttavia, nota che devi anche tenere conto di quanti personaggi stanno aspettando negli appunti per sapere se il totale ti porterà oltre il limite o meno.Fortunatamente, IE contiene anche un oggetto degli appunti dall'oggetto finestra.1 Così:
<textarea onKeyPress="return ( this.value.length < 50 );"
onPaste="return (( this.value.length +
window.clipboardData.getData('Text').length) < 50 );"></textarea>
Ancora una volta, il onPaste
evento e clipboardData
gli oggetti sono solo IE 5+.Per una soluzione cross-browser, dovrai semplicemente utilizzare un file OnChange
O OnBlur
gestore per controllare la lunghezza e gestirla come preferisci (troncare il valore in modo silenzioso, avvisare l'utente, ecc.).Sfortunatamente, questo non rileva l'errore mentre si verifica, solo quando l'utente tenta di lasciare il campo, il che non è altrettanto amichevole.
Inoltre, c'è un altro modo qui, incluso uno script finito che potresti includere nella tua pagina:
http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html
Altri suggerimenti
HTML5 ora lo consente maxlength
attribuire su <textarea>
.
È supportato da tutti i browser tranne IE <= 9 e iOS Safari 8.4.Vedere tabella di supporto su caniuse.com.
$(function(){
$("#id").keypress(function() {
var maxlen = 100;
if ($(this).val().length > maxlen) {
return false;
}
})
});
Riferimento Imposta la lunghezza massima nell'area di testo Html