Problema con onblur y capa que se muestra

pinchu · #1 (**permalink**) 26/07/2010, 06:14

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

Adler · #2 (**permalink**) 26/07/2010, 07:11

Hola

¿Con el evento onblur?. Lo pregunto por que no me queda claro esto

Cita:

cuando no se pulse ni sobre el input

Suerte

pinchu · #3 (**permalink**) 26/07/2010, 07:54

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

Adler · #4 (**permalink**) 26/07/2010, 12:46

Hola

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

Código Javascript:

Ver originalvar SelUsuario = {
 
Evento: function (elemento,nomevento,funcion) {
  if (elemento.attachEvent)
  {
      var f=function(){
        funcion.call(elemento,window.event);
    }
    elemento.attachEvent('on'+nomevento,f);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,false);
      return true;
    }
    else
      return false;
},
 
 
 
init: function(){
var txtfield = document.getElementById("txt"); // el textfield
var elem = document.getElementById("contenedor"); // la capa
        SelUsuario.Evento(elem1, 'click', SelUsuario.Muestra);
        SelUsuario.Evento(elem, 'mouseover', SelUsuario.Seleccionar);
        SelUsuario.Evento(window, 'click', SelUsuario.Cerrar);
    },
 
 
 
Muestra: function () {
var obj = document.getElementById("contenedor")
                if (obj.style.display == "block"); obj.style.display= "none";       
},
 
 
Seleccionar: function () {
var ref = document.getElementById(this.id).getElementsByTagName('DIV'); // la capa y DIV son los elementos que hay dentro de la capa
 
for (var i = 0; i < ref.length; i++) {
 
SelUsuario.Evento(ref[i], 'click', function() {
SelUsuario.Pegar(this.id);
 
})   
}
},
 
 
 
Pegar: function (valor) {
var obj = document.getElementById("contenedor")
        document.getElementById("txt").value = valor;
                if (obj.style.display == "block"); obj.style.display= "none";       
}
 
SelUsuario.Evento(window, 'load', SelUsuario.init);

Suerte

pinchu · #5 (**permalink**) 27/07/2010, 12:35

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....

Adler · #6 (**permalink**) 27/07/2010, 15:16

Hola

Un ejemplo completo

Código Javascript:

Ver original<html>
<head>
<style type="text/css">
#contenedor div.seleccionado {font-weight:bold; background:#F0F0F0; color:#FF6600;}
#contenedor div.deseleccionado {background:#FFFFFF; color:#000000;}
#contenedor div{font:11px verdana; color:#000000; cursor:pointer; text-align:left; padding:2px 5px;}
 
.capa {
background: #FFFFFF;
border:1px solid rgb(120,120,120);
width: 144px;
_width: 146px;
text-align: left;
position: absolute;
top: 30px;
_top:38px;
left: 117px;
_left: 119px;
}
</style>
<script type="text/javascript">
var SelUsuario = {
 
Evento: function (elemento,nomevento,funcion) {
  if (elemento.attachEvent)
  {
      var f=function(){
        funcion.call(elemento,window.event);
    }
    elemento.attachEvent('on'+nomevento,f);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,false);
      return true;
    }
    else
      return false;
},
 
 
 
init: function(){
var elem1 = document.getElementById("txt");
var elem2 = document.getElementById("contenedor");
        SelUsuario.Evento(elem1, 'click', SelUsuario.Muestra);
        SelUsuario.Evento(elem2, 'mouseover', SelUsuario.Seleccionar);
    },
 
 
 
Muestra: function () {
    document.getElementById("contenedor").style.display= "block";
},
 
 
 
Seleccionar: function () {
var ref = document.getElementById(this.id).getElementsByTagName('DIV');
for (var i = 0; i < ref.length; i++) {
 
SelUsuario.Evento(ref[i], 'mousedown', function() {
SelUsuario.Pegar(this.id);
})   
 
 
SelUsuario.Evento(ref[i], 'mouseover',  function() {
SelUsuario.Marcar(this.id);
})
}
 
SelUsuario.Evento(window, 'mouseup', SelUsuario.Cerrar);
 
},
 
 
 
Pegar: function (valor) {
var obj = document.getElementById("contenedor")
        document.getElementById("txt").value = valor;
                if (obj.style.display == "block"); obj.style.display= "none";       
},
 
 
 
Marcar: function (id) {
var selecionado = document.getElementById(id);
var ref = document.getElementById("contenedor").getElementsByTagName('DIV');
for (var i = 0; i <= ref.length-1; i++) {
if (ref[i].id != id) { 
ref[i].className = "deseleccionado";
selecionado.className = "seleccionado";
} 
}
},
 
 
Cerrar: function () {   
var obj = document.getElementById("contenedor")
            if (obj.style.display == "block"); obj.style.display= "none";   
    
}
}
 
 
SelUsuario.Evento(window, 'load', SelUsuario.init); 
</script> 
</head>
<body>
<form method="post" action=""> 
Nombre Usuario: <input type="text" name="txt" id="txt" value="" autocomplete="off" tabindex="1" />
<div id="contenedor" class="capa" style="display:none;">
<div id="pinchu" class="seleccionado">pinchu</div>
<div id="Adler" class="">Adler</div>
<div id="caricato" class="">caricato</div>
<div id="u_golman" class="">U_Goldman</div>
</div>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Suerte

pinchu · #7 (**permalink**) 28/07/2010, 07:30

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

Adler · #8 (**permalink**) 28/07/2010, 07:46

Hola

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

Suerte