Rendere cross-browser l'attributo HTML5 placeholder .
Tra le novità introdotte da HTML5 l’attributo placeholder consente di mostrare un breve suggerimento all’interno dei campi di testo input e textarea: nel momento in cui una determinata casella riceve il focus, il messaggio scompare e viene sostituito dal testo digitato dal navigatore. Purtroppo però il supporto a questo tipo di attributo è limitato ai browser di ultima generazione (IE9 e le ultime versioni di Firefox, Opera, Safari e Chrome). Ho allora realizzato un piccolo plugin javascript basato sulla libreria Prototype per estenderne l'utilizzo anche su browser datati (ad esempio provate la demo su IE7 o IE8): la modalità d'impiego e semplicissima, basta istanziare la classe passando come argomento l'id del form contenente i campi con l'attributo placeholder.
<script src="js/prototype-nw.js" type="text/javascript"></script>
<script type="text/javascript" src="js/spPlaceholder.js"></script>
<script type="text/javascript">
document.observe('dom:loaded', function () {
var testplaceholder = new spPlaceholder('test');
});
</script>
Nella pagina di esempio che ho realizzato per provare lo script anche il link per il download del plugin.
Per chi preferisce utilizzare JQuery come libreria Javascript base, basterà una semplice ricerca su Google per trovare un'ampia scelta di script al riguardo.
- Social:
L'html nel testo del commento è abilitato: i tag consentiti sono: a, em, strong, p, code, pre, quote e br.
Gli attributi dei tag utilizzabili sono title e href.