Foros del Web » Programando para Internet » Javascript »

Problema con onblur y capa que se muestra

Estas en el tema de Problema con onblur y capa que se muestra en el foro de Javascript en Foros del Web. Hola: Tengo un input para elegir una hora. Al pulsar sobre el input se muestra una capa con todas las horas disponibles, luego la idea ...
  #1 (permalink)  
Antiguo 26/07/2010, 06:14
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 11 años, 8 meses
Puntos: 1
Problema con onblur y capa que se muestra

Hola:

Tengo un input para elegir una hora. Al pulsar sobre el input se muestra una capa con todas las horas disponibles, luego la idea es que al pulsar sobre una hora ésta se cargue en el input y se oculte la capa.

El problema que tengo es parar ocultar la capa con las horas. lo que quiero es que cuando no se pulse ni sobre el input ni sobre la capa de elegir hora, dicha capa se oculte.

¿Cómo puedo hacer esto?

Un saludo y gracias
  #2 (permalink)  
Antiguo 26/07/2010, 07:11
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 14 años, 5 meses
Puntos: 126
Respuesta: Problema con onblur y capa que se muestra

Hola

¿Con el evento onblur?. Lo pregunto por que no me queda claro esto
Cita:
cuando no se pulse ni sobre el input
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 26/07/2010, 07:54
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 11 años, 8 meses
Puntos: 1
Respuesta: Problema con onblur y capa que se muestra

A ver, yo lo que quiero es:

1-) Al pulsar sobre el input muestro la capa con todas las horas disponibles

Ahora hay dos posibilidades:

2-1) - Si pulso en un sitio que no es ni el input ni la capa con las horas , quiero ocultar la capa.

2-2) - Si por el contrario elijo una hora, quiero hacer una serie de cosas que no son importantes para el problema en cuestión.

El problema es detectar dónde se pulsó cuando el input pierde el focus (onblur).

A ver si ahora quedó más claro. Gracias adler
  #4 (permalink)  
Antiguo 26/07/2010, 12:46
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 14 años, 5 meses
Puntos: 126
Respuesta: Problema con onblur y capa que se muestra

Hola

Pruba con esto. Necesitas un textfield con id txt y un div(capa) con el nombre contenedor

Código Javascript:
Ver original
  1. var SelUsuario = {
  2.  
  3. Evento: function (elemento,nomevento,funcion) {
  4.   if (elemento.attachEvent)
  5.   {
  6.       var f=function(){
  7.         funcion.call(elemento,window.event);
  8.     }
  9.     elemento.attachEvent('on'+nomevento,f);
  10.     return true;
  11.   }
  12.   else  
  13.     if (elemento.addEventListener)
  14.     {
  15.       elemento.addEventListener(nomevento,funcion,false);
  16.       return true;
  17.     }
  18.     else
  19.       return false;
  20. },
  21.  
  22.  
  23.  
  24. init: function(){
  25. var txtfield = document.getElementById("txt"); // el textfield
  26. var elem = document.getElementById("contenedor"); // la capa
  27.         SelUsuario.Evento(elem1, 'click', SelUsuario.Muestra);
  28.         SelUsuario.Evento(elem, 'mouseover', SelUsuario.Seleccionar);
  29.         SelUsuario.Evento(window, 'click', SelUsuario.Cerrar);
  30.     },
  31.  
  32.  
  33.  
  34. Muestra: function () {
  35. var obj = document.getElementById("contenedor")
  36.                 if (obj.style.display == "block"); obj.style.display= "none";      
  37. },
  38.  
  39.  
  40. Seleccionar: function () {
  41. var ref = document.getElementById(this.id).getElementsByTagName('DIV'); // la capa y DIV son los elementos que hay dentro de la capa
  42.  
  43. for (var i = 0; i < ref.length; i++) {
  44.  
  45. SelUsuario.Evento(ref[i], 'click', function() {
  46. SelUsuario.Pegar(this.id);
  47.  
  48. })  
  49. }
  50. },
  51.  
  52.  
  53.  
  54. Pegar: function (valor) {
  55. var obj = document.getElementById("contenedor")
  56.         document.getElementById("txt").value = valor;
  57.                 if (obj.style.display == "block"); obj.style.display= "none";      
  58. }
  59.  
  60. SelUsuario.Evento(window, 'load', SelUsuario.init);
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 27/07/2010, 12:35
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 11 años, 8 meses
Puntos: 1
Respuesta: Problema con onblur y capa que se muestra

muchisimas gracias por las molestias adler pero no logro entender en general qué hace exactamente lo que me muestras.lo de los eventos onclick onmouseover....
  #6 (permalink)  
Antiguo 27/07/2010, 15:16
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 14 años, 5 meses
Puntos: 126
Respuesta: Problema con onblur y capa que se muestra

Hola

Un ejemplo completo
Código Javascript:
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #contenedor div.seleccionado {font-weight:bold; background:#F0F0F0; color:#FF6600;}
  5. #contenedor div.deseleccionado {background:#FFFFFF; color:#000000;}
  6. #contenedor div{font:11px verdana; color:#000000; cursor:pointer; text-align:left; padding:2px 5px;}
  7.  
  8. .capa {
  9. background: #FFFFFF;
  10. border:1px solid rgb(120,120,120);
  11. width: 144px;
  12. _width: 146px;
  13. text-align: left;
  14. position: absolute;
  15. top: 30px;
  16. _top:38px;
  17. left: 117px;
  18. _left: 119px;
  19. }
  20. </style>
  21. <script type="text/javascript">
  22. var SelUsuario = {
  23.  
  24. Evento: function (elemento,nomevento,funcion) {
  25.   if (elemento.attachEvent)
  26.   {
  27.       var f=function(){
  28.         funcion.call(elemento,window.event);
  29.     }
  30.     elemento.attachEvent('on'+nomevento,f);
  31.     return true;
  32.   }
  33.   else  
  34.     if (elemento.addEventListener)
  35.     {
  36.       elemento.addEventListener(nomevento,funcion,false);
  37.       return true;
  38.     }
  39.     else
  40.       return false;
  41. },
  42.  
  43.  
  44.  
  45. init: function(){
  46. var elem1 = document.getElementById("txt");
  47. var elem2 = document.getElementById("contenedor");
  48.         SelUsuario.Evento(elem1, 'click', SelUsuario.Muestra);
  49.         SelUsuario.Evento(elem2, 'mouseover', SelUsuario.Seleccionar);
  50.     },
  51.  
  52.  
  53.  
  54. Muestra: function () {
  55.     document.getElementById("contenedor").style.display= "block";
  56. },
  57.  
  58.  
  59.  
  60. Seleccionar: function () {
  61. var ref = document.getElementById(this.id).getElementsByTagName('DIV');
  62. for (var i = 0; i < ref.length; i++) {
  63.  
  64. SelUsuario.Evento(ref[i], 'mousedown', function() {
  65. SelUsuario.Pegar(this.id);
  66. })  
  67.  
  68.  
  69. SelUsuario.Evento(ref[i], 'mouseover',  function() {
  70. SelUsuario.Marcar(this.id);
  71. })
  72. }
  73.  
  74. SelUsuario.Evento(window, 'mouseup', SelUsuario.Cerrar);
  75.  
  76. },
  77.  
  78.  
  79.  
  80. Pegar: function (valor) {
  81. var obj = document.getElementById("contenedor")
  82.         document.getElementById("txt").value = valor;
  83.                 if (obj.style.display == "block"); obj.style.display= "none";      
  84. },
  85.  
  86.  
  87.  
  88. Marcar: function (id) {
  89. var selecionado = document.getElementById(id);
  90. var ref = document.getElementById("contenedor").getElementsByTagName('DIV');
  91. for (var i = 0; i <= ref.length-1; i++) {
  92. if (ref[i].id != id) {
  93. ref[i].className = "deseleccionado";
  94. selecionado.className = "seleccionado";
  95. }
  96. }
  97. },
  98.  
  99.  
  100. Cerrar: function () {  
  101. var obj = document.getElementById("contenedor")
  102.             if (obj.style.display == "block"); obj.style.display= "none";  
  103.    
  104. }
  105. }
  106.  
  107.  
  108. SelUsuario.Evento(window, 'load', SelUsuario.init);
  109. </script>
  110. </head>
  111. <body>
  112. <form method="post" action="">
  113. Nombre Usuario: <input type="text" name="txt" id="txt" value="" autocomplete="off" tabindex="1" />
  114. <div id="contenedor" class="capa" style="display:none;">
  115. <div id="pinchu" class="seleccionado">pinchu</div>
  116. <div id="Adler" class="">Adler</div>
  117. <div id="caricato" class="">caricato</div>
  118. <div id="u_golman" class="">U_Goldman</div>
  119. </div>
  120. <input type="submit" value="Enviar">
  121. </form>
  122. </body>
  123. </html>
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #7 (permalink)  
Antiguo 28/07/2010, 07:30
 
Fecha de Ingreso: septiembre-2009
Mensajes: 215
Antigüedad: 11 años, 8 meses
Puntos: 1
Respuesta: Problema con onblur y capa que se muestra

Vale, muchas gracias por las molestias. Efectivamente entendiste lo que necesitaba. Por lo que veo la clave es que detectas cada pulsación de ratón, guardas el id del elemento sobre el que se pulsó y luego si la capa se está mostrando la ocultas.

Esto se puede hacer por que onmousedown va antes que onmouseup, ¿podría utilizar onclick para guardar el id y onmouseup para cerrar la capa?

De nuevo, gracias
  #8 (permalink)  
Antiguo 28/07/2010, 07:46
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 14 años, 5 meses
Puntos: 126
Respuesta: Problema con onblur y capa que se muestra

Hola

Es solo cuestión de probarlo, pero sí. Un poco de literatura

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />

Etiquetas: muestra, onblur, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:27.