HTML5 fornisce il nuovo attributo contenteditable che permette di editare in tempo reale il contenuto di qualsiasi elemento testuale della pagina. Questo attributo si rivela molto utile nel caso dell'implementazione di un contatore di caratteri in stile Twitter con jQuery. Vediamo insieme i dettagli dell'implementazione.
La nostra struttura HTML si presenta così:
<h1><a href="http://www.twitter.com/">Twitter</a> What's happening?</h1>
<div id="content" contenteditable="true"></div>
<div id="counter"></div>
<p id="tweet"><a href="#">Tweet</a></p>
L'elemento content viene reso editabile dall'attributo contenteditable. Impostiamo alcuni stili su di esso per gestire il contenuto al suo interno, che è dinamico:
#content {
margin: 1em 0;
height: 150px;
border: 1px solid #666;
outline-style: none;
word-wrap: break-word;
}
#content:focus {
background: #eee;
}
Il valore break-word della proprietà CSS3 word-wrap ci permette di gestire lunghe linee di testo senza problemi di overflow dei contenuti. Con jQuery dobbiamo semplicemente conteggiare, ad ogni pressione dei tasti, la differenza tra il numero di caratteri disponibili (140) e il numero di caratteri presenti nell'area di testo. Se il numero di caratteri è uguale o inferiore a 0, aggiungiamo una classe CSS al contatore per visualizzare i numeri in rosso:
$(function() {
var allowed = 140;
var calculate = function(obj) {
var count = $(obj).text().length;
var available = allowed - count;
$(obj).next().html(available);
if(available <= 0) {
$(obj).next().addClass('warning');
} else {
$(obj).next().removeClass('warning');
}
};
$('#content').keyup(function() {
calculate(this);
});
});
Si noti come sia stata usata la proprietà length del nodo testuale dell'elemento in modo da avere sempre un conteggio aggiornato anche in fase di cancellazione dei caratteri.
Potete visionare l'esempio finale in questa pagina.