JQuery - hacer aparecer un div al hacer click dentro de un input

   
Vista:

hacer aparecer un div al hacer click dentro de un input

Publicado por Sam (31 intervenciones) el 23/08/2015 21:12:21
Hola buenas , alguien me podria echar una mano con esto por favor:

Como hacer para hacer visible un div al hacer click dentro de un input.

gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Fede

hacer aparecer un div al hacer click dentro de un input

Publicado por Fede (2 intervenciones) el 24/08/2015 03:09:53
Estaría bueno tener más info acerca de lo que querés hacer para darte la mejor solución.. es decir para qué lo vas a utilizar.. y que clase de input es el que queres usar.

Intuyo que si decis "dentro de un input", es de tipo texto.. y no se que div querrás hacer aparecer pero bueno, podes hacerlo de dos formas, usando click o usando focus:

Con click, de esta forma:
1
2
3
4
5
$("input").click(function(){
 
	$("div").fadeIn();
 
});
Asi lo haces aparecer pero no desaparece.. si cambias fadeIn() por toggle() logras que si el elemento está desaparecido, al hacer click aparece.. y si el elemento esta visible, al hacer click desaparece.

La forma de hacerlo con focus seria esta:
1
2
3
4
5
$("input").focus(function(){
 
	$("div").fadeIn();
 
});

De igual forma que con la de click.. si cambias el fadeIn() por toggle() al hacer focus aparece y haciendo focus de nuevo desaparece.. tambien se puede usar la funcion css() y cambiar el display none por display block, en fin, hay muchas formas de hacerlo aparecer pero estas son las más faciles.

Yo te recomiendo hacerlo de esta forma:
1
2
3
4
5
6
7
8
9
10
11
$("input").focus(function(){
 
	$("div").fadeIn();
 
});
 
$("input").blur(function(){
 
	$("div").fadeOut();
 
});
Asi cuando el input toma el foco el div aparece.. y cuando clickeas cualquier otro lado q no sea el input (es decir, le quitas el foco) desaparece.

Te dejo un codepen para que los veas en funcionamiento: http://codepen.io/fede5426/pen/qdebJL

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

hacer aparecer un div al hacer click dentro de un input

Publicado por Sam (31 intervenciones) el 24/08/2015 21:26:08
Pues fede, ante todo gracias por la ayuda me ha valido de mucho, te doy mas detalles (aunque con el ejemplo que has puesto esta ya resuelto):

Es para un input tipo text. concretamente para un buscador que estoy haciendo en ajax
para que cuando haga click dentro del cagetin de buscar aparezca visible un div que contrendra las busquedas que el usuario escriba.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

hacer aparecer un div al hacer click dentro de un input

Publicado por Vainas (96 intervenciones) el 24/08/2015 18:21:43
Buenas:

Podría ser una ventana modal quizás?? das poca info.

Muy buen ejemplo Fede.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar