O HTML5 fez muitos aprimoramentos no formulário da Web, como o novo tipo de entrada, a validação do formulário, etc. O espaço reservado é outro atributo adicionado ao HTML5. Quando a entrada ou a textarea definir esse atributo, o conteúdo desse valor será exibido na caixa de texto como um prompt de palavra cinza. Quando a caixa de texto ganha foco, o texto rápido desaparece. No passado, para alcançar esse efeito, JavaScript era usado para controlá -lo:
Como o espaço reservado é um novo atributo, apenas alguns navegadores o oferecem atualmente. Como detectar se o navegador suporta? (Mais detecção de recursos HTML5/CSS3 pode ser acessada)
função hasplaceholdersupport () {
retornar 'espaço reservado' no document.createElement ('input');
}
O texto de prompt padrão é cinza e o estilo de texto pode ser alterado através do CSS:
/ * all */::-webkit-input-placeholder {color:#f00; } entrada: -moz-placeholder {color:#f00; } / * Individual: Webkit * /#Field2 ::-Webkit-Input-PlaceLitder {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 fonte: itálico; Decoração de texto: Overline; Espacamento de cartas: 3px; Cor:#999; }Compatível com outros navegadores que não suportam espaço reservado:
Var espaço reservado = {
_support: (function () {
retornar 'espaço reservado' no document.createElement ('input');
}) (),
// O estilo do texto rápido precisa ser definido em outros locais na página
ClassName: 'ABC',
init: function () {
if (! Planteholder._support) {
// A textarea não foi processada, adicione o que você precisa fazer
var inputs = document.getElementsByTagName ('input');
Planteholder.create (entradas);
}
},
Criar: function (entrada) {
entrada de var;
if (! inputs.length) {
entrada = [entradas];
}
for (var i = 0, comprimento = inputs.length; i <comprimento; i ++) {
entrada = entrada [i];
if (! Parholder._support && input.attributes && input.attributes.placeholder) {
Planteholder._setValue (entrada);
input.addeventListener ('focus', função (e) {
if (this.value === this.attributes.placeholder.nodEvalue) {
this.value = '';
this.className = '';
}
}, false);
input.addeventListener ('Blur', função (e) {
if (this.value === '') {
Placeholder._setValue (this);
}
}, false);
}
}
},
_setValue: function (entrada) {
input.value = input.attributes.placeholder.nodEvalue;
input.className = PlanteHolder.className;
}
};
// Inicialize todas as entradas quando a inicialização da página
//Placeholder.init ();
// ou defina um elemento separadamente
//Placeholder.create(document.getElementById('t1 '));