Uno sguardo sull'attributo segnaposto HTML5
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 fornire un suggerimento agli utenti su quale input è previsto in quel campo. Una volta che gli utenti iniziano a digitare ingresso campo, questo testo scomparirà.
Ai vecchi tempi, lo facciamo comunemente con JavaScript, come segue;
Non c'è niente di sbagliato in questa pratica, ma è più semplice su HTML5.
HTML5 ha introdotto un nuovo attributo con un nome logico; segnaposto. Ecco un esempio:
Se lo visualizziamo sui browser, l'input dovrebbe ora avere il testo grigio, come mostrato di seguito;
Alcune cose che dovrebbero essere notate: secondo le specifiche, il segnaposto l'attributo non deve essere usato in alternativa a a etichetta e si suggerisce anche di applicare questo attributo solo a ingresso tipi che richiedono testo, ad es. testo, parola d'ordine, ricerca, e-mail, textarea e tel.
Aggiunta segnaposto al ingresso tipi: Radio e casella di controllo non farà alcuna differenza.
Segnaposto e CSS
Inoltre, è possibile anche lo styling del testo segnaposto tramite CSS, ma al momento della stesura è ancora limitato ai soli browser Firefox e Webkit.
L'esempio seguente mostra come cambiamo il testo segnaposto in verde sia in Webkit che in Firefox;
input :: - webkit-input-placeholder color: green; input: -moz-placeholder color: green;
Solo per ricordare però, il :: - webkit-input-segnaposto e : -Moz-segnaposto influenzerà 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 attributi
Anche CSS3 è venuto a supportare questo attributo introducendo il [Placeholder] selettore di attributi;
input [segnaposto] bordo: 1px verde fisso;
Nell'esempio sopra, selezioniamo ogni ingresso quello ha il segnaposto attributo e cambia il bordo in verde.
Compatibilità del browser
Questa nuova funzionalità HTML5 non è ovviamente supportata nei vecchi browser e al momento è supportata solo in: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 e Internet Explorer 10 (che non è ancora stato rilasciato ufficialmente).
Polistirolo segnaposto
Tuttavia, se abbiamo bisogno di visualizzare il segnaposto nei browser più vecchi, ma siamo comunque in grado di utilizzare il segnaposto attributo, possiamo usare Polyfills. Ci sono molti Polistirolo segnaposto là fuori, ma in questo esempio useremo PlaceMe.js;
The PlaceMe.js, come puoi vedere dallo snippet di codice sopra, dipende da jQuery. Ora, se lo visualizziamo, ad esempio, in Internet Explorer 9 tutti gli input dovrebbero ora mostrare il testo segnaposto.
- Visualizza la demo
- Scarica fonte
Pensiero finale
Il Segnaposto HTML5 l'attributo rende sicuramente più semplice l'aggiunta di testo segnaposto. Ora tocca a noi, sviluppatori e progettisti web, scegliere il metodo da utilizzare: JavaScript o HTML5.
Se si considera che l'utilizzo di Polyfills 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.
