Comentário: Muitos novos recursos interessantes foram introduzidos no HTML5; Alguns se refletem no HTML, outros são APIs de JavaScript, todos muito úteis. Um dos meus recursos favoritos é a propriedade de espaço reservado na caixa de texto (entrada).
A propriedade de espaço reservado permite exibir informações rápidas na caixa de texto. Depois de inserir qualquer informação na caixa de texto, as informações rápidas serão ocultas. Você pode ter visto esse efeito inúmeras vezes antes, mas a maioria deles é implementada no JavaScript, e agora o HTML5 fornece suporte nativo e funciona melhor!
Código HTML
Você também viu que tudo o que você precisa fazer é adicionar o atributo de espaço reservado ao rótulo da declaração da caixa de texto. JavaScript não é necessário para criar esse efeito.
Verifique se o navegador suporta o atributo de espaço reservado
Como o espaço reservado é uma nova propriedade, é muito necessário verificar se o seu navegador a suporta. Por exemplo, o IE6 e o IE8 definitivamente não são suportados:
função hasplaceholdersupport () {
var input = document.createElement ('input');
return ('espaço reservado' na entrada);
}
Se o navegador do usuário não suportar o recurso de espaço reservado, você precisará usar MooTools, Dojo ou outras ferramentas de JavaScript para implementá -lo:
/* Mootools ftw! */
var FirstNameBox = $ ('First_Name'),
mensagem = primeironamebox.get ('espaço reservado');
FirstNameBox.addevents ({
foco: function () {
if (primeironamebox.value == message) {searchbox.value = ''; }
},
Blur: function () {
if (primeironamebox.value == '') {searchbox.value = message; }
}
});
Embelezar o espaço reservado com CSS
Durante pesquisas adicionais, descobri outro recurso interessante do CSS: o CSS embelezando o efeito de espaço reservado. Deixe -me usar o código CSS simples para embelezar o texto do espaço reservado na caixa de texto.
Código CSS
O uso no navegador Firefox é diferente do do Google Chrome. Seus nomes são fáceis de entender:
/* todos */
::-webkit-input-placeholder {color:#f00; }
::-moz-placeholder {color:#f00; } / * Firefox 19+ * /
: -ms-input-placeholder {color:#f00; } / * ie * /
entrada: -moz-placeholder {color:#f00; }
/ * Individual: webkit */
#field2 ::-webkit-input-placeholder {color:#00f; }
#field3 ::-webkit-input-placeholder {color:#090; Antecedentes: Lightgreen; TRANSFORMA DE TEXTO: OUPERCASE; }
#field4 ::-webkit-input-placeholder {estilo font: itálico; Decoração de texto: Overline; Espacamento de cartas: 3px; Cor:#999; }
/ * Individual: Mozilla */
#field2 ::-moz-placeholder {color:#00f; }
#field3 ::-moz-placeholder {color:#090; Antecedentes: Lightgreen; TRANSFORMA DE TEXTO: OUPERCASE; }
#Field4 ::-Moz-placeholder {estilo de fonte: itálico; Decoração de texto: Overline; Espacamento de cartas: 3px; Cor:#999; }
Você pode controlar a fonte, a cor e o estilo de texto de espaço reservado. Você pode até exibir o espaço reservado da caixa de texto de maneira animada. Embelezar suas caixas de texto é algo que parece pequeno, mas para alguns sites interativos, a chave para o sucesso está nos detalhes. Agora o IE10 só suporta espaço reservado. Eu acredito que mais e mais pessoas usarão esse efeito de espaço reservado nativo.