uma das minhas novas peças favoritas no HTML5 é a capacidade de adicionar facilmente o texto de substituição. O texto de substituição é o texto cinzento que você encontra num campo de entrada que é usado para dar uma dica aos usuários sobre o que a entrada é esperada nesse campo. Assim que os utilizadores começarem a escrever no campo input, este texto desaparecerá.
nos velhos tempos, geralmente fazemos isto com JavaScript, como se segue;
não há nada de errado com esta prática, mas é mais fácil no HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Aqui está um exemplo:
<input type="text" placeholder="Placeholder Text">
Se nós os navegadores, a entrada deverá 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 uma alternativa para uma label e também é sugerido que este atributo só deve ser aplicado à tag input tipos que necessitam de texto, por exemplo, text password search email textarea e tel.
Adicionar placeholder input tipos: radio e checkbox não vai fazer qualquer diferença.
substituição & CSS
além disso, o estilo do texto de substituição através do CSS também é possível, mas no momento desta escrita ainda está limitado a apenas navegadores Firefox e Webkit.,
O exemplo a seguir mostra como alterar o texto do espaço reservado para o verde, tanto no Webkit e Firefox;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
Apenas para lembrar, porém, ::-webkit-input-placeholder e :-moz-placeholder irá apenas afectar o texto e não podem ser gravados em paralelo.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
Esta peça de código não funcionará.,
Seletor de Atributo
o CSS3 também veio para apoiar este atributo através da introdução de seletor de atributo;
input {border: 1px solid green;}
No exemplo acima, vamos selecionar cada input que tem o placeholder atributo e alterar o limite para o verde.,
Compatibilidade de Navegador
Este novo recurso do HTML5, sem surpresa, não é suportado em navegadores antigos e é atualmente só é totalmente suportada: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 e 10 do Internet Explorer (que não foi lançado oficialmente ainda).
Marcador de Livros
no Entanto, se é necessário apresentar o espaço reservado em navegadores mais antigos, mas ainda ser capaz de usar o placeholder atributo, podemos usar Livros., Há um monte de Polifills de substituição lá fora, mas neste exemplo vamos usar o PlaceMe.js;
PlaceMe.js, como você pode ver a partir do excerto de código acima, é dependente de jQuery. Agora, se a visualizarmos, por exemplo, No Internet Explorer 9, todas as entradas devem agora exibir o texto de substituição.
- View Demo
- Download Source
Final Thought
The HTML5 Placeholder attribute certainly makes adding placeholder text easy., Agora cabe a nós, desenvolvedores web e designers, escolher qual método usar: JavaScript ou HTML5.
Se você considerar que usar Polifills e jQuery para suportar navegadores antigos é redundante, então JavaScript é aparentemente mais adequado para o trabalho. Mas se você pode ignorar pacificamente os navegadores antigos, em seguida, usar o substituto HTML5 é provavelmente uma maneira melhor.