Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mv.silvapereira

hint em input

Por , em Javascript

Recommended Posts

mv.silvapereira    0

mv.silvapereira
Postado

Amigos estou resolvendo um exercicio de javascript e ele me pede pra fazer um hint em um input de busca

seguindo alguns passos.

 

1. Sete o valor do input de busca para o texto do elemento label

2. Adicione uma classe "hint" ao input de busca

3. Remova o elemento label

4. Faça um Bind do evento focus no input de busca que remove o texto de hint e a classe "hint".

5. Faça um bind do evento blur para o input de busca que restaura o texto de hint e a classe "hint" se

nenhum texto for informado.

 

Alguém pode dar um help??

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ok, qual a dúvida ?

 

oq você já fez ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Fazer o bind de um evento:

 

function id(el){
   return document.getElementById(el);
}
window.onload = function(){
   id('input-busca').onfocus = function(){
       this.className= '';
   }
   id('input-busca').onblur = function(){
       this.className= 'hint';
   }
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não vou fazer todo o exercício pra ti cara.

 

dá um id para o label, pega a propriedade .innerHTML do label, e atribua a propriedade .value do input.

Tente fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mv.silvapereira    0

mv.silvapereira
Postado

Amigo eu consegui atribuir o valor ao input text com esse codigo abaixo.. mas so consigo fazer quando atribuo um onclik no botão :/ como vo fazer pra aparecer automaticamente?

 

function hint(){
var userInput = document.getElementById('label').innerHTML;
document.getElementById('Input').value = userInput;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

basta chamar a função, sem esperar o click. Só isso.

 

por exemplo no onload da página.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mv.silvapereira    0

mv.silvapereira
Postado

Amigo isso foi oq eu consegui fazre até agora

 

window.onload = function hint(){
var userInput = document.getElementById('label').innerHTML;
document.getElementById('Input').value = userInput;
$("#Input").addClass("hint");

$("#Input").bind("click focus", function(){
	$("#Input").removeClass("hint");
	document.getElementById('Input').value = '';
});

$("#Input").bind("blur", function(){
	$("#Input").addClass("hint");
	document.getElementById('Input').value = '';
});
}

 

Então eu consegui fazer aparecer o valor no input.. consegui também quando clicar tirar a classe e o texto.. porém quando tiro o focus do campo o texto nem a classe voltam.. oq ainda pode estar errado?? e outra duvida no caso é certo eu começar com window.onload mesmo???

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você vai usar jQuery então ?

achei q ia fazer no javascript puro.

 

 

Nesse caso, pode fazer assim:

 

(function($){
   /* private functions */
   var hintInput = function($input, $label, hintText){
        $input.addClass("hint").val(hintText);
   };

   /* document ready */
   $(document).ready(function(){
        var $label = $('#label'),
        hintText = $label.text(),
        $input = $('#Input');


        /* estado incial */
        hintInput($input, $label, hintText);//itens 2 e 1
        $label.remove();//item 3


        $input.bind("click focus", function(){//item 4
	var $this = $(this);
	$this.removeClass("hint").val('');
});
 $input.bind("blur", function(){//item 5
	hintInput($input, $label, hintText);
});


   });//document.ready


})(jQuery);

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rubens De Andrade Garcia    1

Rubens De Andrade Garcia
Postado

Solução em javascript puro proposta por Drew Noakes

http://www.drewnoakes.com/code/javascript/hintTextbox.html

 

<html>
<head>
<title>Caixa de sugestão -- INPUT HINT</title>

<style>
INPUT.hintTextbox       { color: #888; }
INPUT.hintTextboxActive { color: #000; }
</style>
</head>
<body>
<form>
<input type="text" name="nome"  value="Digite seu Nome" size="50" class="hintTextbox"><br />
<input type="text" name="sobrenome" value="Digite seu Sobrenome" size="50" class="hintTextbox"><br />
<input type="text" name="email" value="Digite seu Email" size="20" class="hintTextbox">
</form>
</body>

<script type="text/javascript">
// Script by Drew Noakes
// http://drewnoakes.com
// 14 Dec 2006 - Initial release
// 08 Jun 2010 - Added support for password textboxes

var HintClass = "hintTextbox";
var HintActiveClass = "hintTextboxActive";

// define a custom method on the string class to trim leading and training spaces
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); };

function initHintTextboxes() {
 var inputs = document.getElementsByTagName('input');
 for (i=0; i<inputs.length; i++) {
   var input = inputs[i];
   if (input.type!="text" && input.type!="password")
     continue;

   if (input.className.indexOf(HintClass)!=-1) {
     input.hintText = input.value;
     input.className = HintClass;
     input.onfocus = onHintTextboxFocus;
     input.onblur = onHintTextboxBlur;
   }
 }
}

function onHintTextboxFocus() {
 var input = this;
 if (input.value.trim()==input.hintText) {
   input.value = "";
   input.className = HintActiveClass;
 }
}

function onHintTextboxBlur() {
 var input = this;
 if (input.value.trim().length==0) {
   input.value = input.hintText;
   input.className = HintClass;
 }
}

window.onload = initHintTextboxes;

</script>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito