Google Chrome: problema de enfoque con la barra de desplazamiento

Question

Estoy usando jQuery 1.3.2.

Hay un campo de entrada en un formulario. Al hacer clic en el campo de entrada se abre un div como un menú desplegable. El div contiene una lista de elementos. Como el tamaño de la lista es grande, hay una barra de desplazamiento vertical en el div.

Para cerrar el menú desplegable cuando se hace clic fuera, hay un evento de desenfoque en el campo de entrada.

Ahora el problema es:

en cromo (2.0.172) cuando se hace clic en la barra de desplazamiento, el campo de entrada va a perder el foco. Y ahora si hace clic afuera, el menú desplegable no se cerrará (ya que la entrada ya perdió el foco al hacer clic en la barra de iconos)

En Firefox (3.5), IE (8), opera (9.64), safari() cuando hacemos clic en la barra de desplazamiento, el campo de entrada no pierde el foco. Por lo tanto, cuando haces clic afuera (después de hacer clic en la barra de sroll), el menú desplegable se cerrará. Este es el comportamiento esperado.

En Chrome, una vez que se hace clic en la barra de desplazamiento, y luego, si hago clic afuera, el menú desplegable no se cerrará. ¿Cómo puedo solucionar este problema con Chrome?

Answer 1

Anteriormente también me enfrenté a tal situación y esto es lo que he estado haciendo.

$('html').click(function() { 
    hasFocus = 0; 
    hideResults(); 
}); 

y en el campo de entrada voy a hacer esto

$('input').click() 
{ 
    event.stopPropagation(); 

} 

Así que esto se cerrará el menú desplegable si se hace clic en cualquier lugar fuera de la div (incluso la barra de desplazamiento). Pero pensé que si alguien pudiera proporcionar una solución más lógica.

Answer 2

¿Podría quizás configurar el evento de desenfoque para disparar en el menú desplegable también? De esta manera, cuando sea la entrada o el menú desplegable deja de estar seleccionado, que desaparecerá ...

Answer 3

tengo curiosidad ...
Usted está utilizando la última versión de todos los navegadores, por qué no hacer lo intentas en Chrome 4.0.202?

Answer 4

Bueno, tuve el mismo problema en mi control desplegable. Les pregunté a los desarrolladores de Chrome sobre este tema, dijeron que es que no va a solucionarse en el futuro cercano debido a que "no ha sido informado por muchas personas y la solución no es trivial". Entonces, seamos sinceros: este error se mantendrá por al menos un año más.

Aunque, para este caso particular (menú desplegable) hay una solución. El truco es: cuando se hace clic en una barra de desplazamiento, el evento "mouse down" llega al elemento owner de esa barra de desplazamiento. Podemos usar este hecho para establecer un marcador y verificarlo en el controlador "onblur". Aquí la explicación:

<input id="search_ctrl"> 
<div id="dropdown_wrap" style="overflow:auto;max-height:30px"> 
    <div id="dropdown_rows"> 
    <span>row 1</span> 
    <span>row 2</span> 
    <span>row 2</span> 
    </div> 
</div> 

"dropdown_wrap" div obtendrá una barra de desplazamiento vertical ya que su contenido no se ajusta a la altura fija. Una vez que recibimos el clic, estamos seguros de que se hizo clic en la barra de desplazamiento y se quitará el foco. Ahora algunos código de cómo manejar esto:

search_ctrl.onfocus = function() { 
    search_has_focus = true 
} 

search_ctrl.onblur = function() { 
    search_has_focus = false 
    if (!keep_focus) { 
    // hide dropdown 
    } else { 
    keep_focus = false; 
    search_ctrl.focus(); 
    } 
} 

dropdow_wrap.onclick = function() { 
    if (isChrome()) { 
    keep_focus = search_has_focus; 
    } 
} 

Eso es todo. No necesitamos ningún truco para FF así que hay un cheque para el navegador.En Chrome, detectamos el clic en la barra de desplazamiento, permitimos enfocar con borrosidad sin cerrar la lista y luego restablecer inmediatamente el foco al control de entrada. Por supuesto, si tenemos algo de lógica para "search_ctrl.onfocus" también debería modificarse. Tenga en cuenta que debemos verificar si search_ctrl tiene foco para evitar problemas con doble clic.

Puede adivinar que una mejor idea podría estar cancelando un evento onblur pero esto no funcionará en Chrome. No estoy seguro si esto es un error o característica.

P.S. "dropdown_wrap" no debe tener ningún borde o paddings, de lo contrario el usuario podría hacer clic en estas áreas y lo trataremos como un clic de la barra de desplazamiento.

Answer 5

en lugar de detectar el desenfoque, detectar document.body o la ventana, hacer clic y agarrar el punto del mouse. determinar si este punto del mouse está fuera del cuadro de menú. ¡Presto, has detectado cuando hicieron clic fuera de la caja!

Answer 6

que resolvieron este haciendo lo siguiente:

#my_container es el contenedor que tiene el "overflow: auto" regla CSS

$('#my_container') 
    .mouseenter(function(){ 
    // alert('ctr in!'); 
    mouse_in_container = true; 
    }) 

    .mouseleave(function(){ 
    // alert('ctr out!'); 
    mouse_in_container = false; 
    }); 

Y luego:

$('input').blur(function(){ 
    if(mouse_in_container) 
    return; 
    ... Normal code for blur event ... 
}); 

Cuando seleccione un elemento en el menú desplegable, reescribo el código como:

 (>> ADDED THIS) mouse_in_container=false; 
     $('input').attr('active', false); // to blur input 
     $('#my_container').hide(); 

Answer 7

Estaba enfrentando la misma situación/problema y probé la solución desde "ihsoft" pero tiene algunos problemas. Así que trabajé en una alternativa para eso e hice solo uno similar a "ihsoft" pero uno que funciona. aquí está mi solución:

var hide_dropdownlist=true; 

search_ctrl.onblur = function() { 

    search_has_focus = false 
    if (hide_dropdownlist) { 
    // hide dropdown 
    } else { 
    hide_dropdownlist = true; 
    search_ctrl.focus(); 
    } 
} 

dropdow_wrap.onmouseover = function() { 
    hide_dropdownlist=false; 
} 
dropdow_wrap.onmouseoout = function() { 
    hide_dropdownlist=true; 
} 

Espero que esto ayude a alguien.

Answer 8

No pude obtener estas respuestas para el trabajo, tal vez porque son de 2009. Acabo de lidiar con esto, creo que ihsoft está en el camino correcto, pero un poco pesado.

Con dos funciones

onMouseDown() { 
    lastClickWasDropdown=true; 
} 
onBlur() { 
    if (lastClickWasDropdown) { 
     lastClickWasDropdown = false; 
     box.focus(); 
    } else { 
     box.close(); 
    } 
} 

El truco está en cómo se enlaza los elementos. El evento onMouseDown debe estar en el div "contenedor" que contiene todo lo que se hará clic (es decir, el cuadro de texto, la flecha desplegable y el cuadro desplegable y su barra de desplazamiento). El evento Blur (o en jQuery el evento de enfoque) debe vincularse directamente al cuadro de texto.

¡Probado y funciona!