MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
Usare il "placeholder" su tutti i browser
Tra le diverse novità introdotte con HTML5 ne troviamo una piccola ma estremamente comoda per quanto riguarda la creazione di form all'interno di un sito o applicazione: il placehoder.
Questo attributo applicabile agli elementi di tipo input (specie i "text") e textarea permette di specificare un valore temporaneo, appena l'utente clicca sulla casella di testo e inizia a scrivere questo valore scompare rimpiazzato da quello che si sta digitando al suo interno. Nonostante non sia una feature eccezionale o rivoluzionaria si è dimostrata spesso una piccolezza che migliora molto l'esperienza utente sulla compilazione della form.
Fino a prima di HTML5 era una cosa implementabile esclusivamente con Javascript, ma anche se dal prossimo futuro sarà uno standard come facciamo adesso a fare in modo che questa piccola funzionalità sia usufruibile da tutti?
[btn url="http://www.moebiusmania.net/tutorial/2013/placeholder_demo.html"]Guarda una demo[/btn] [btn url="http://www.moebiusmania.net/wp-content/plugins/download-monitor/download.php?id=15"]Scarica i file dell'esempio[/btn]
Uno sguardo in avanti (ma anche nel presente)
HTML5 sarà una specifica finalizzata dal W3C nel 2014 ma sappiamo che molti browser stanno allungando le mani iniziando a supportare già da qualche anno alcune di queste feature, tramite il servizio Can I use? possiamo notare che l'attributo placeholder gode di un'ottima compatibilità sulle ultime versioni di tutti i browser, vediamo quindi come si usa questo semplice attributo:<input type="text" placeholder="Puoi scrivere qui dentro">creando una input testuale o una textarea è possibile specificare questo nuovo attributo "placeholder" assegnando come valore il testo che vogliamo visualizzare (in genere visualizzato in grigio) nel caso in cui la casella sia vuota, appena cliccate sulla casella e digitate vedrete il vostro testo rimpiazzare il segnaposto usando il colore impostato per l'elemento (basta semplicamente impostare la prorpietà color tramite una regola CSS).
Uno sguardo al passato (ma anche nel presente)
Purtroppo sappiamo che non tutte le ultime versioni dei browser sono le più diffuse, specialmente nel mondo Internet Explorer, in più notiamo che neanche IE9 supporta l'attributo placeholder! Abbiamo quindi bisogno di una soluzione che funzioni alla vecchia maniera... e l'unico che può aiutarci in questo caso è Javascript. Esistono diverse librerie che ricreano la funzionalità del placeholder tramite Javascript e quella che vi mostrerò in questo articolo senza troppe sorprese si chiama placeholder.js non è molto complessa da utilizzare, per prima cosa scarichiamo e includiamo lo script:<script type="text/javascript" src="js/placeholder.min.js"></script>come nel punto precendente aggiungiamo una nuova input di testo o una textarea e impostiamo il parametro placeholder. Ora in nuovo tag script o un nuovo file .js scriviamo questo comando:
Placeholder.init({wait: true});
dove semplicemente inizializiamo il plugin e come unico parametro gli indichiamo "wait: true" che serve a fare in modo che il testo nella casella rimanga fino a che viene digitato qualcosa al suo interno, senza questo parametro in genere il plugin rimuove il testo temporaneo non appena si clicca sulle caselle. Non si tratta di una differenza abissale, in questo caso ho deciso di attivare il parametro wait per fare in modo che l'esperienza d'uso della form sia identica in entrambe le circostanze (HTML5 o Javascript).
Passato, presente e futuro insieme
A questo punto l'unico dilemma è quale soluzione adottare per la pubblicazione. In entrambi i casi lasciamo fuori alcune fette di utenti e vogliamo cercare di ottimizzare il tutto: placeholder.js non da problemi su browser che supportano HTML5 ma vorremmo evitare di far caricare la libreria ad utenti che non ne hanno bisogno perché hanno un browser che supporta il placeholder nativamente. Visto che in questa caso i browser problematici sono solamente i vecchi IE (stranamente...) possiamo risolvere il tutto inserendo i due tag Javascript visti nel passaggio precedente all'interno di un commento condizionale:<!--[if IE lt 10]> ... codice ... <![endif]-->in questo modo il plugin e il suo codice di attivazione vengono caricati solo da Internet Explorer, "lt 10" significa che la condizione deve considere le versioni inferiori alla 10 escludendo quest'ultima.