Comentário: O navegador introduziu muitos recursos HTML5. Um dos meus favoritos é apresentar o atributo de espaço reservado para o elemento de entrada. O atributo de espaço reservado exibe texto do guia até que a caixa de entrada obtenha o foco de entrada. Quando o usuário inserir o conteúdo, o conteúdo do guia será oculto automaticamente.
Endereço original: atributo de espaço reservado do HTML5Endereço de demonstração: espaço reservado
Data original: 9 de agosto de 2010
Data de tradução: 6 de agosto de 2013
O navegador apresenta muitos recursos HTML5: alguns são baseados no HTML, alguns estão na forma de APIs de JavaScript, mas todos são muito úteis. Um dos meus favoritos é a introdução do atributo de espaço reservado para o elemento de entrada.
A propriedade de espaço reservado exibe o texto do guia até que a caixa de entrada obtenha o foco de entrada. Quando o usuário inserir o conteúdo, o conteúdo do guia será oculto automaticamente. Você definitivamente viu essa técnica implementada no JavaScript milhares de vezes, mas o suporte nativo do HTML5 geralmente é melhor.
O código HTML é o seguinte:
<input type = "text" placeholder = "Por favor, insira o endereço permanente ...">
Tudo o que você precisa fazer é adicionar um domínio de espaço reservado e algum conteúdo de texto guiado, e não precisa de scripts JavaScript adicionais para alcançar esse efeito. Não é ótimo?
Teste de apoio à espaço reservatória
(Observe que este é um artigo de 2010. Até agora, em 2013, os principais navegadores deveriam ter apoiado.)
Como o espaço reservado é um novo recurso, é necessário testar o suporte ao navegador. O código JS é o seguinte:
// Crie um elemento de entrada no JS e determine se o elemento tem um atributo chamado espaço reservado
// Se o navegador suportar, essa propriedade existirá no DOM referenciado em JS
função hasplaceholdersupport () {
var input = document.createElement ('input');
return ('espaço reservado' na entrada);
}
Se o navegador não suportar o recurso de espaço reservado, você precisará de uma estratégia de fallback para lidar com isso, como Mootools, Dojo ou outras ferramentas de JavaScript. (Agora o dojo pode ser usado menos, e mais na China são jQuery e extjs.)
/* Código jQuery, é claro, lembre -se de apresentar a biblioteca jQuery*/
$ (function () {
if (! hasplaceholdersupport ()) {
// Obtenha o elemento de endereço
var $ endereço = $ ("entrada [nome = 'endereço']");
espaço reservado = $ endereço.attr ("espaço reservado");
// Evento de foco de ligação
$ endereço.bind ('foco', function () {
if (espaço reservado == $ endereço.val ()) {
$ endereço.val ('');
}
});
// Evento de foco perdido
$ endereço.bind ('Blur', function () {
if ('' == $ endereço.val ()) {
$ endereço.val (espaço reservado);
}
});
}
});
O espaço reservado é outra ótima propriedade adicional para o navegador substituir os trechos JS, você pode até editar o estilo de espaço reservado do HTML5.
Todos os códigos são os seguintes:
<! Doctype html>
<html>
<head>
<Title> HTML5 Demonstração de atributos de espaço reservado </ititure>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "original = http: //davidwalsh.name/html5-placeholder">
<script src = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<Cript>
// Crie um elemento de entrada no JS e determine se o elemento tem um atributo chamado espaço reservado
// Se o navegador suportar, essa propriedade existirá no DOM referenciado em JS
função hasplaceholdersupport () {
var input = document.createElement ('input');
return ('espaço reservado' na entrada);
}
/* Código jQuery, é claro, lembre -se de apresentar a biblioteca jQuery*/
$ (function () {
if (! hasplaceholdersupport ()) {
// Obtenha o elemento de endereço
var $ endereço = $ ("entrada [nome = 'endereço']");
espaço reservado = $ endereço.attr ("espaço reservado");
// Evento de foco de ligação
$ endereço.bind ('foco', function () {
if (espaço reservado == $ endereço.val ()) {
$ endereço.val ('');
}
});
// Evento de foco perdido
$ endereço.bind ('Blur', function () {
if ('' == $ endereço.val ()) {
$ endereço.val (espaço reservado);
}
});
}
});
</script>
</head>
<Body>
<div>
<form método = "post" action = "">
<input type = "text" placeholder = "Por favor, insira o endereço permanente ...">
<input type = "submit" value = "test">
</morm>
</div>
</body>
</html>