Sabe aquelas caixas de busca que mostram, por exemplo, "Buscar" e que quando colocamos o foco, o texto some para escrevermos o que quisermos? Vamos mostrar aqui uma função javascript para aplicar essa funcionalidade a elementos input.
A idéia é que a função recebe como parâmetros o elemento input e a mensagem a ser exibida quando não houver outro texto digitado e aplica isso ao input. Lá vai a função:
-
function msgIfEmpty(el, msg) {
-
var hasval = /\w/.test(el.value);
-
if(!hasval) {
-
el.value = msg;
-
addClass(el, 'disabled');
-
}
-
el.defaultValue = msg;
-
el.onfocus = function() {
-
if(this.value == this.defaultValue) {
-
this.value = '';
-
removeClass(this, 'disabled');
-
}
-
};
-
el.onblur = function() {
-
if(/^\s*$/.test(this.value)) {
-
this.value = this.defaultValue;
-
addClass(this, 'disabled');
-
}
-
};
-
}
Começamos aplicando a mensagem como valor default do input (e como valor do atributo value se não há valor declarado). Então definimos funções para os eventos onfocus e onblur do elemento.
Adicionalmente, adicionamos a classe 'disabled' quando a mensagem está sendo exibida. Para isso, usamos as funções (bastante conhecidas) addClass e removeClass, mostradas abaixo.
-
function addClass(el, classn) {
-
removeClass(el, classn);
-
el.className += ' '+classn;
-
}
-
-
function removeClass(el, classn) {
-
if (!(el && el.className)) return;
-
var cls = el.className.split(/\s+/), ar = [];
-
for(var i = cls.length; i > 0;) if(cls[--i] != classn) ar.push(cls[i]);
-
el.className = ar.join(" ");
-
}
Essa é uma função simples e útil, poupando o trabalho de reescrever esse simples javascript em cada elemento. Veja um exemplo de uso aqui.
3 Comentários
tentei usar o codigo que vc postou acima numa pagina onde ocorreu uma chamada de banco de dados e exibe os imputs com as informações contidas no db… porém, o codigo que vc postou sóexibe a mensagem no primeiro input vazio (mesmo todos estando vazios)… será que vc pode me ajudar .. preciso que exiba a mensagem em todos os inputs vazios…
obrigado.
Na página de exemplo, trabalhamos com 3 campos.
Faça como no exemplo: no final do documento (para q os campos estejam carregados), chame msgIfEmpty para cada campo.
Com o html5, é só acrescentar o atributo placeholder ao campo. Nos meus testes, só o chrome suportou, por enquanto.