Um olhar sobre o atributo do marcador de posição HTML5
Uma das minhas novas peças favoritas no HTML5 é a capacidade de adicionar Texto de espaço reservado facilmente. O texto de espaço reservado é o texto cinza que você encontra em um campo de entrada que é usado para dar uma dica aos usuários sobre qual entrada é esperada nesse campo. Quando os usuários começarem a digitar no entrada campo, este texto desaparecerá.
Antigamente, geralmente fazemos isso com JavaScript, do seguinte modo;
Não há nada errado com essa prática, mas é mais fácil no HTML5.
O HTML5 introduziu um novo atributo com um nome lógico; placeholder. Aqui está um exemplo:
Se o visualizarmos nos navegadores, a entrada deve agora ter o texto cinza, como visto abaixo;
Algumas coisas que devem ser observadas: de acordo com a especificação, o placeholder atributo não deve ser usado como alternativa a um rótulo e também é sugerido que este atributo só deve ser aplicado a entrada tipos que exigem texto, por exemplo. texto, senha, procurar, o email, textarea e tel.
Adicionando placeholder ao entrada tipos: rádio e caixa de seleção não fará diferença.
Placeholder e CSS
Além disso, também é possível estilizar o texto de espaço reservado por meio de CSS, mas, no momento em que este texto foi escrito, ainda está limitado apenas aos navegadores Firefox e Webkit..
O exemplo a seguir mostra como alteramos o texto do espaço reservado para verde no Webkit e no Firefox;
input :: - webkit-input-placeholder cor: verde; input: -moz-placeholder color: verde;
Apenas para lembrar, porém, o :: - webkit-input-placeholder e : -moz-placeholder afetará apenas o texto e não pode ser escrito em paralelo.
input :: - webkit-input-placeholder, input: -moz-placeholder cor: verde;
Este trecho de código não funcionará.
Seletor de Atributos
CSS3 também veio para apoiar este atributo, introduzindo o [placeholder] seletor de atributos;
input [placeholder] border: 1px verde sólido;
No exemplo acima, selecionamos todos os entrada que tem o placeholder atribuir e alterar a borda para verde.
Compatibilidade do Navegador
Esse novo recurso HTML5 não é surpreendente, não é suportado em navegadores antigos e atualmente é totalmente suportado apenas em: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 e Internet Explorer 10 (que ainda não foi oficialmente lançado).
Placeholder Polyfills
No entanto, se precisarmos exibir o alocador de espaço em navegadores mais antigos, mas ainda assim conseguirmos usar o placeholder atributo, podemos usar Polyfills. Há muitos Placeholder Polyfills lá fora, mas neste exemplo vamos usar o PlaceMe.js;
O PlaceMe.js, como você pode ver no snippet de código acima, depende do jQuery. Agora, se o visualizarmos, por exemplo, no Internet Explorer 9, todas as entradas devem exibir o texto do espaço reservado.
- Ver demonstração
- Fonte de download
Pensamento final
o Espaço reservado em HTML5 atributo certamente facilita a adição de texto de espaço reservado. Agora cabe a nós, desenvolvedores e designers da Web, escolher qual método usar: JavaScript ou HTML5.
Se você considerar que o uso de Polyfills e jQuery para suportar navegadores antigos é redundante, então o JavaScript é aparentemente mais adequado para o trabalho. Mas se você puder ignorar pacificamente os navegadores antigos, usar o Espaço reservado para HTML5 provavelmente será uma maneira melhor.
