Uno dei miei nuovi pezzi preferiti in HTML5 è la possibilità di aggiungere testo segnaposto facilmente. Il testo segnaposto è il testo grigio che si trova in un campo di input che viene utilizzato per dare un suggerimento agli utenti su quale input è previsto in quel campo. Una volta che gli utenti iniziano a digitare nel campo input, questo testo scomparirà.
Ai vecchi tempi, lo facciamo comunemente con JavaScript, come segue;
Non c’è nulla di sbagliato in questa pratica, ma è più facile su HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Ecco un esempio:
<input type="text" placeholder="Placeholder Text">
Se si visualizza sul browser, l’ingresso dovrebbe ora avere il testo in grigio, come di seguito indicato;
Un paio di cose che dovrebbe essere notato: secondo il disciplinare, il placeholder attributo non deve essere utilizzato come alternativa ad un label e inoltre è suggerito che questo attributo deve essere applicato solo per input tipi che richiedono di testo, ad es., text password search email textarea e tel.
Aggiungereplaceholder ai tipiinput:radio echeckbox non farà alcuna differenza.
Segnaposto& CSS
Inoltre, lo styling del testo segnaposto tramite CSS è anche possibile, ma al momento della stesura di questo documento è ancora limitato ai soli browser Firefox e Webkit.,
L’esempio seguente mostra come si modifica il testo segnaposto verde sia in Webkit e Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
Solo per ricordare, però, ::-webkit-input-placeholder e :-moz-placeholder interesserà solo il testo e non può essere scritto in parallelo.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
Questo pezzo di codice non funzionerà.,
Selettore di Attributo
CSS3 è venuto anche a supporto di questo attributo, introducendo il selettore di attributo;
input {border: 1px solid green;}
Nell’esempio di cui sopra, selezioniamo ogni input che il placeholder attributo e modificare il bordo verde.,
Compatibilità del Browser
Questa nuova funzionalità di HTML5, ovviamente, non è supportato nel vecchio browser e al momento è solo pienamente supportati: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 e Internet Explorer 10 (che non è stato ufficialmente rilasciato ancora).
Segnaposto Polyfills
Tuttavia, se abbiamo bisogno di visualizzare il segnaposto nei browser più vecchi ma siamo ancora in grado di utilizzare l’attributoplaceholder, possiamo usare Polyfills., Ci sono un sacco di Polyfill segnaposto là fuori, ma in questo esempio useremo il PlaceMe.js;
<script src="https://www.hongkiat.com/blog/html5-placeholder/amp/jquery.js" type="text/javascript"></script><script src="https://www.hongkiat.com/blog/html5-placeholder/amp/placeme.js" type="text/javascript"></script>
Il PlaceMe.js, come puoi vedere dal frammento di codice sopra, dipende da jQuery. Ora, se lo visualizziamo in, ad esempio, Internet Explorer 9 tutto l’input dovrebbe ora visualizzare il testo segnaposto.
- Visualizza Demo
- Scarica Sorgente
Pensiero finale
L’attributo segnaposto HTML5 facilita certamente l’aggiunta di testo segnaposto., Ora tocca a noi, sviluppatori web e designer, scegliere quale metodo utilizzare: JavaScript o HTML5.
Se si considera che l’utilizzo di Polyfill e jQuery per supportare i vecchi browser è ridondante, JavaScript è apparentemente più adatto per il lavoro. Ma se puoi tranquillamente ignorare i vecchi browser, usare il segnaposto HTML5 è probabilmente un modo migliore.