remove - jquery unfocus input

jQuery: disparo de fuego() antes del evento blur()

Question

Tengo un campo de entrada, donde intento hacer una sugerencia de autocompletar. El código se ve como

<input type="text" id="myinput">
<div id="myresults"></div>

En el evento blur() entrada, quiero ocultar los resultados ''div:

$("#myinput").live(''blur'',function(){
     $("#myresults").hide();
});

Cuando escribo algo en mi entrada, envío una solicitud al servidor y obtengo una respuesta json, la analizo en la estructura ul-> li y la pongo en mi div #myresults .

Cuando hago clic en este elemento li analizado, quiero establecer el valor de li para ingresar y ocultar #myresults div

$("#myresults ul li").live(''click'',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});

Todo va bien, pero cuando hago clic para desactivar my li blur() evento antes de que click() y el valor de entrada no obtengo el html de li.

¿Cómo puedo configurar el evento click() antes de blur() ?

Answer 1

Solución 1

Escucha el mousedown lugar de click .

Los eventos de mousedown y blur ocurren uno tras otro cuando presiona el botón del mouse, pero solo hace click cuando lo suelta.

Solución 2

Puede mousedown preventDefault() en mousedown para bloquear el menú desplegable de robar el foco. La pequeña ventaja es que el valor se seleccionará cuando se suelte el botón del mouse, que es cómo funcionan los componentes de selección nativos. JSFiddle

$(''input'').on(''focus'', function() {
    $(''ul'').show();
}).on(''blur'', function() {
    $(''ul'').hide();
});

$(''ul'').on(''mousedown'', function(event) {
    event.preventDefault();
}).on(''click'', ''li'', function() {
    $(''input'').val(this.textContent).blur();
});

Answer 2

Acabo de responder una pregunta similar: https://.com/a/46676463/227578

Una alternativa a las soluciones mousedown es hacer que ignore los eventos de desenfoque causados ​​al hacer clic en elementos específicos (es decir, en su controlador de desenfoque, omita la ejecución si es el resultado de hacer clic en un elemento específico).

$("#myinput").live(''blur'',function(e){
     if (!e.relatedTarget || !$(e.relatedTarget).is("#myresults ul li")) {
         $("#myresults").hide();
     }
});

Answer 3

Las soluciones de Mousedown no funcionan para mí, cuando hago clic en elementos que no son de botón. Así que aquí está lo que he hecho con la función de desenfoque en mi código:

.on("blur",":text,:checkbox,:radio,select",function() {
/*
* el.container 
* container, you want detect click function on.
*/
            var outerDir = el.container.find('':hover'').last();
            if (outerDir.length) {
                if ($.inArray(outerDir.prop(''tagName''), ["A","SELECT"] ) != -1 || outerDir.prop(''type'') == ''button'' || outerDir.prop(''type'') == ''submit'') {
                    outerDir.click();
                }
                if (outerDir.prop(''type'') == ''checkbox'') {
                    outerDir.change();
                }
                return false;
            }
/*          
* YOUR_BLUR_FUNCTION_HERE;
*/
});

Answer 4

Me enfrenté a este problema y usar mousedown no es una opción para mí.

Lo resolví usando setTimeout en la función de controlador

        elem1.on(''blur'',function(e) {

            var obj = $(this);

            // Delay to allow click to execute
            setTimeout(function () {
                if (e.type == ''blur'') {

                  // Do stuff here

                }
            }, 250);
        });

        elem2.click( function() {
            console.log(''Clicked'');
        });

Answer 5

$(document).on(''blur'', "#myinput", hideResult);

$(document).on(''mousedown'', "#myresults ul li", function(){
     $(document).off(''blur'', "#myinput", hideResult); //unbind the handler before updating value
     $("#myinput").val($(this).html()).blur(); //make sure it does not have focus anymore
     hideResult(); 
     $(document).on(''blur'', "#myinput", hideResult);  //rebind the handler if needed
});

function hideResult() {
     $("#myresults").hide();
}

FIDDLE