In questo articolo vi illustrerò come realizzare una textarea con limite max di caratteri e un contatore live dei caratteri inseriti, usando jquery.
Inseriamo innanzitutto la libreria jquery.
Il codice html della pagina è questo:
Codice HTML
<div class="contenitore">
<h3>Live Textarea Count Limit</h3>
<h4>Il testo e' limitato a 180 caratteri</h4> <span class="contatore">0</span> caratteri
<br>
<textarea cols="45" rows="10"></textarea>
</div>il questo esempio il limite massimo di caratteri da inserire nella textarea è 180, il tag span.contatore contiene il contatore live dei caratteri inseriti nella textarea.
A questo punto lo script da usare è il seguente:
Codice JavaScript
$(document).ready(function() {
var limitemax = 180; /* limite max di caratteri del textarea*/
var txt = $('textarea').val(); /*testo nella textarea */
var lentxt = txt.length; /* lunghezza del testo nella textarea*/
$('span.contatore').html(lentxt);
/* function limited */
function limited(obj, limite) {
var $contatore = $('span.contatore');
var testo = $(obj).val();
var lunghezza = testo.length;
if(lunghezza > limite) {
$(obj).val(testo.substr(0, limite));
$contatore.html(lunghezza - 1);
alert('hai superato il limite 180 max di caratteri');
} else {
$contatore.html(lunghezza);
};
};
/* the end function limited*/
$('textarea').keyup(function() {
limited($(this), limitemax);
});
});la funzione limited ha lo scopo di limitare appunto il numero di caratteri da inserire nel textarea, una volta definita questa funzione, la " fuction keyup " applica "function limited" all'oggetto textarea e al limite definito (limitemax) pari a 180.