0

Estoy trabajando con un buscador a base javascript y similar al del navegador Firefox.

Cuando uso el evento keyup con la tecla Escape, sí se cierra correctamente el dialogo de resultados, pero no así con el evento blur.

Cuando selecciono con click el input con evento keyup y otra función con evento focus, se abre el dialogo de resultados. Al dialogo le agrego focus() para luego usar blur() pero, no me funciona de ninguna manera.

Lo mas cercano que logre es lo siguiente; pero esto no me funciona del todo ya que, al hacer click sobre el mismo dialogo, de igual forma se cierra. Por ejemplo, al hacer click en el footer del dialogo, se cierra.

function busquedaFuera() { // Cerrar centro de búsqueda

    dialogo.classList.remove("visible");
    yoBusqueda.classList.remove("activo");
    Input.blur();
    Input.value = "";
    info.innerText = `Escribe algo para buscar o elije una opción`;
    dialogo.blur();
};

yoBusqueda.addEventListener("blur", () => {

    // NO ME FUNCIONA EL BLUR SOBRE UN DIV CLASS
    if(dialogo) busquedaFuera();

}, true );

const yoBusqueda = document.getElementById("yoBusqueda");
const Input = document.getElementById("yoBusqueda-input");
const dialogo = document.getElementById("yoBusqueda-dialogo");
const result = document.getElementById("resultados");

function resu(results) { // Abrir centro de búsqueda y resultados

    yoBusqueda.classList.add("activo");
    dialogo.classList.add("visible");
    dialogo.focus();
}

function busquedaFuera() { // Cerrar centro de búsqueda

    dialogo.classList.remove("visible");
    yoBusqueda.classList.remove("activo");
    Input.blur();
    Input.value = "";
    info.innerText = `Escribe algo para buscar o elije una opción`;
    dialogo.blur();
};

Input.addEventListener("focus", (e) => resu(e) );


yoBusqueda.addEventListener("blur", () => {

    // NO ME FUNCIONA EL BLUR SOBRE UN DIV CLASS
    if(dialogo) busquedaFuera();

}, true );

window.addEventListener("keyup", (e) => {

    // SI FUNCIONA
    if(e.key === "Escape" && dialogo.classList.contains("visible")) busquedaFuera();
});
*::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0;
    display: none;
} *::-webkit-scrollbar-button:increment, ::-webkit-scrollbar-button {
    display: none;
} *::-webkit-scrollbar-track {
    background-color: transparent;
} * {
    outline: 0;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    -webkit-tap-highlight-color: transparent;
} *, ::before, ::after {
    margin: 0;
    box-sizing: border-box
}

:root {
    --height50: 50px;
    --heightNav: 40px;
    --textoMini: .50rem;
    --textoPeque: .80em;
    --colorBlanco: rgb(255 255 255);
    --colorAzul: rgb(58 133 156);
    --colorGris: rgb(204 204 204);
    --colorIconos: rgb(255 228 196);
    --fondoNegro: rgb(0 0 0);
    --fondoPrimario: rgb(33 46 55);
    --fondoSecundario: rgb(43 48 59);
    --fondoSecundarioTransparente: rgba(43 48 59 / 0.5);
    --fondoNegroTransparente: rgba(0 0 0 / 0.5);
    --fondoBlancoTransparente: rgba(255 255 255 / 0.3);
    --fondoRojoTransparente: rgba(255 0 0 / 0.3);
    --bordeRadius-30rem: .30rem;
    --transicionNormal: transform 0.2s ease-in-out;
} html, body {
    margin: 0;
    padding: 0
} body {
    min-height: 100vh;
    font-size: 16px;
    line-height: normal;
    font-family: sans-serif
}

a {
    text-decoration: none;
    color: lightblue
}

ul {
    margin: 0;
    padding: .50rem;
    list-style: none
}

.m-r-5, .bi-r-5::before {margin-right: 5px}
.m-l-5, .bi-l-5::before {margin-left: 5px}

headland, .headland {
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--height50);
    padding: 0 1rem;
    background-color: var(--fondoNegroTransparente);
    box-shadow: 0 0 5px #000
}

.yoBusqueda {
    display: block;
    width: 40vw;
    height: fit-content;
    min-height: var(--heightNav);
    max-height: 75vh;
    margin-top: 5px;
    margin-left: 0;
    border-radius: var(--bordeRadius-30rem);
    background-color: var(--fondoNegroTransparente);
    transition: var(--transicionNormal)
} .yoBusqueda .yoBusqueda-btnMovil {
    display: none
} .yoBusqueda-dialogo {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 0;
    border-radius: var(--bordeRadius-30rem);
    background-color: var(--fondoNegroTransparente);
    opacity: 0;
    transition: 0.3s
} .yoBusqueda-dialogo.visible {
    opacity: 1;
    visibility: visible;
    height: auto;
    background-color: var(--fondoSecundario)
}

.yoBusqueda-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    position: relative;
    width: 100%;
    height: var(--heightNav);
    padding: 0 .50rem;
    border: 1px solid transparent;
    border-radius: var(--bordeRadius-30rem);
    background-color: var(--fondoPrimario)
} .yoBusqueda:hover .yoBusqueda-header, .yoBusqueda.activo .yoBusqueda-header {
    border-color: bisque;
    box-shadow: 0 0 5px bisque
} .yoBusqueda-header.alerta {
    border-color: red;
    box-shadow: 0 0 5px red
} .yoBusqueda-header .yoBusqueda-input {
    display: inline-block;
    width: 100%;
    text-align: left;
    cursor: inherit;
    color: var(--colorBlanco)
} .yoBusqueda-header .yoBusqueda-input:focus {
    border-color: transparent;
    box-shadow: 0 0 0 .25rem transparent
} .yoBusqueda-header .yoBusqueda-btn {
    white-space: nowrap
}

.yoBusqueda-body {
    flex: 1 1 ;
    max-height: 70vh;
    overflow-y: auto;
} .yoBusqueda-body .detalles {
    display: flex;
    align-items: center;
    width: calc(100% - 2rem);
    height: var(--heightNav);
    margin: auto;
    margin-bottom: 5px;
    cursor: default;
    color: var(--colorGris);
    font-size: var(--textoPeque);
    border-bottom: 1px solid rgb(17 34 51)
} .yoBusqueda-body .preBusqueda {
    display: block;
    width: 100%
} .yoBusqueda-body .resultados, .yoBusqueda-body .preBusqueda.pre {
    display: none
} .yoBusqueda-body .resultados.visible {
    display: block
} .yoBusqueda-body .preBusqueda, .yoBusqueda-body .resultados {
    max-height: calc(100% - var(--heightNav) * 2);
    overflow-y: auto
} .yoBusqueda-body ul {
    padding: 0 .50rem;
    width: 100%
}

.yoBusqueda-body li, .yoBusqueda-body li a, .yoBusqueda-body .aGoogle {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px
} .yoBusqueda-body li {
    cursor: default
} .yoBusqueda-body li, .yoBusqueda-body .aGoogle {
    margin-bottom: 5px
} .yoBusqueda-body li:hover {
    background-color: var(--fondoBlancoTransparente)
} .yoBusqueda-body li a {
    padding: 0 .50rem
} .yoBusqueda-body .aGoogle li.disabled a {
    pointer-events: none;
    opacity: 0.5
} .yoBusqueda-body .aGoogle li.disabled:hover {
    background-color: var(--fondoRojoTransparente)
} .yoBusqueda-body li a:hover {
    background-color: var(--fondoVerdeTransparente)
}

.yoBusqueda-footer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: 100%;
    height: var(--heightNav);
    padding: 0 1rem;
    border-top: 1px solid var(--colorNegroTransparente);
    border-radius: 0 0 var(--bordeRadius-30rem) var(--bordeRadius-30rem);
    background-color: var(--fondoPrimario)
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<headland class="headland" id="headland">
        
        <div class="yoBusqueda" id="yoBusqueda">
            <button class="btn btn-sm btn-secondary yoBusqueda-btnMovil bi-search" id="yoBusqueda-btnMovil"></button>
            <div class="yoBusqueda-header">
                <input type="text" class="btn btn-sm yoBusqueda-input" placeholder="Buscar algo" id="yoBusqueda-input">
                <button class="btn btn-sm btn-secondary yoBusqueda-btn">Botón</button>
            </div>
            <div class="yoBusqueda-dialogo" id="yoBusqueda-dialogo">
                <div class="yoBusqueda-body">
                    <div class="detalles">
                        <span id="infoResultado">Escribe algo para buscar o elije una opción</span>
                    </div>
                    <div class="resultados" id="resultados"></div>
                    <div class="preBusqueda" id="preBusqueda">
                        <ul>
                            <li><a href="#no">Enlace resultado</a> </li>
                            <li>No es enlace</li>
                            <li><a href="#no">Enlace resultado</a> </li>
                            <li>No es enlace</li>
                        </ul>
                    </div>
                    <ul class="aGoogle">
                        <li class="disabled"><a href="#no" class="bi-google bi-r-5">Buscar <b class="esto m-l-5 m-r-5"></b> en Google</a></li>
                    </ul>
                </div>
                <div class="yoBusqueda-footer">
                    footer 
                </div>
            </div>
        </div>

    </headland>

1 respuesta 1

1

Para que el evento blur funcione en un div debes agregar el atributo tabindex en el div

Revisar los siguientes ejemplos, debes hacer click intermitentemente en ambos cuadradados

Ejemplo SIN tabindex (No se ejecutará)

document.querySelectorAll(".cuad").forEach(e=>e.addEventListener("blur",Blur));

function Blur(event){
  console.log(event.target.innerText);
}
.cuad{
 width:100px;
 height:50px;
 border: 1px solid black;
 margin: 10px;
}
<div class="cuad" > TEST1</div>
<div class="cuad"> TEST2</div>

Ejemplo CON tabindex (Lo mismo con el anterior, solo que ahora se agrega el atributo)

document.querySelectorAll(".cuad").forEach(e=>e.addEventListener("blur",Blur));

function Blur(event){
  console.log(event.target.innerText);
}
.cuad{
 width:100px;
 height:50px;
 border: 1px solid black;
 margin: 10px;
}
<div class="cuad" tabindex="0"> TEST1</div>
<div class="cuad" tabindex="1"> TEST2</div>

2
  • Muy bien, cambie yoBusqueda.addEventListener("blur", por este: dialogo.addEventListener("blur", y me funciona muy bien el 30 ene. 2023 a las 14:39
  • Claro, usando tabindex el 30 ene. 2023 a las 14:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.