Ciao, quella funzione dovrebbe essere definita nell'head della pagina e comunque dovrebbe agire già su ogni textarea in modo relativo. Non mi è chiaro se ti stia funzionando o meno; non riesco a capirlo da ciò che hai indicato.
L'unica pecca potrebbe essere nel fatto che non gestisce eventuale inserimento di testo attraverso il copia incolla via menu. Infatti sul gestore di eventi on() hai definito solo l'evento keyup per cui il conteggio avviene solo al "rilascio" dei tasti da tastiera ma non viene aggiornato se si utilizza il menu del browser "modifica>incolla" o il menu contestuale (tasto dx del mouse) "incolla".
In tal caso ti consiglio di aggiungere qualche altro evento. Nello specifico potresti attivare la funzione sugli eventi keyup ed input.
In particolare, l'evento input è relativo al gestore di eventi oninput, supportato dai browser di "nuova generazione" (cioè escluse vecchie versioni di ie & company) e viene innescato, appunto, quando avviene un qualsiasi tipo di inserimento da parte dell'utente.
In effetti basterebbe questo evento che è più adatto alla situazione, ma il keyup è comunque utile per garantire una certa retrocompatibilità.
Per cui, intanto, potresti migliorare il codice con questa modifica:
codice:
$('textarea').on('keyup input', function(){
Non capisco poi cosa intendi per "sempre sotto ciclo while php".
Ad ogni modo, per limitare la lunghezza del testo che è possibile inserire, esiste l'attributo HTML maxlength.
Potresti quindi definire il limite direttamente sui tag <textarea> ed eventualmente indicare un testo esplicito che avvisi l'utente sul limite di caratteri inseribili.
Una cosa tipo:
codice:
<textarea maxlength="150"></textarea>
Questo tipo di soluzione è di tipo preventivo, cioè ti evita di eseguire ulteriori controlli via JavaScript e di mostrare relativi avvisi (che potrebbero risultare fastidiosi) all'utente.
Da chiarire che l'attributo maxlength è una nuova caratteristica HTML5 per gli elementi textarea, inoltre potrebbe non essere supportata su vecchi browser. Da valutare quindi se ti serve avere comunque uno script per garantire sempre una certa retrocompatibilità.
A mio avviso, attualmente, sarebbe sufficiente (con HTML5) una soluzione di questo tipo:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$('textarea').on('keyup input', function(){
var wordsLength = $(this).val().length;
$(this).next().find('.wordcount').html(wordsLength);
}).keyup();
});
</script>
</head>
<body>
<label for="tmcp_textarea_2">Inserire il messaggio <small>(max 10 caratteri)</small></label><br>
<textarea class="tmcp-field tmcp-textarea" name="tmcp_textarea_2" maxlength="10"></textarea>
<span class="after-amount">Hai inserito <span class="wordcount">0</span> caratteri.</span>
<br>...<br>
<label for="tmcp_textarea_2">Inserire il messaggio <small>(max 150 caratteri)</small></label><br>
<textarea class="tmcp-field tmcp-textarea" name="tmcp_textarea_2" maxlength="150"></textarea>
<span class="after-amount">Hai inserito <span class="wordcount">0</span> caratteri.</span>
</body>
</html>
Nota che qui ho definito due "istanze" di textarea. La funzione è comunque definita una sola volta perché agisce su ciascuna in modo relativo aggiornando, appunto, il relativo contatore fratello della textarea.
Nota inoltre che ho inserito la chiamata della funzione .keyup() in modo da forzare l'aggiornamento del contatore all'apertura della pagina. Utile nel caso in cui la textarea contenga già del testo; diversamente il contatore apparirebbe inizialmente a 0 anche se effettivamente c'è del testo. E' giusto un piccolo accorgimento.
Vedi se può andare bene una soluzione del genere.
Rispondi quotando
