Conta caratteri in javascript nei campi di testo
Buonasera a tutti, dopo la pausa natalizia torniamo on-line proponendovi uno script che ci permette di creare una textarea con il conta caratteri in javascript.
Per prima cosa nel body creiamo il seguente div con la textarea e uno span che indicherà il numero massimo di caratteri che è possibile inserire:
<div>
<textarea id=”area” maxlength=”400″ size=”60″ onkeyup=”Contar(‘area’,'contatore’,'{CHAR} caratteri rimanenti.’,400);”> </textarea><br />
<span id=”contatore”>400 caratteri rimanenti.</span>
</div>
Gli attributi inseriti nella textarea servono ad impostare il numero di caratteri che è possibile inserire (quindi per modificarli bisogna sostituire il valore “400″ con quello da voi scelto.
Inoltre nell’attributo onkeyup dovete inserire come primo e secondo valore (in questo caso area e contatore) il valore che avete dato ali ID della textarea e allo span, altrimenti non funziona.
Il codice javascript da inserire nell’head della pagina per far funzionare il conta caratteri è il seguente:
<script type=”text/javascript”>
function getObject(obj) {
var theObj;
if(document.all) {
if(typeof obj==”string”) {
return document.all(obj);
} else {
return obj.style;
}
}
if(document.getElementById) {
if(typeof obj==”string”) {
return document.getElementById(obj);
} else {
return obj.style;
}
}
return null;
}//Contatore dei caratteri.
function Contar(entrada,salida,texto,caracteres) {
var entradaObj=getObject(entrada);
var salidaObj=getObject(salida);
var longitud=caracteres – entradaObj.value.length;
if(longitud <= 0) {
longitud=0;
texto=’<span> ‘+texto+’ </span>’;
entradaObj.value=entradaObj.value.substr(0,caracteres);
}
salidaObj.innerHTML = texto.replace(“{CHAR}”,longitud);
}
</script>
Ciaramente tramite il css potete modificare le dimensioni, il colore ecc.. della textarea.
Per vedere la demo clicca qui
Per scaricare il file d’esempio clicca qui
Spero che questo post vi possa essere d’aiuto, vi auguro un buon lavoro.
Share
