javascript - ejemplo - onblur html5

blur event.relatedTarget devuelve null

Question

Tengo un campo <input type="text"> y necesito borrarlo cuando este campo pierde el foco (lo que significa que el usuario hizo clic en algún lugar de la página). Pero hay una excepción. El campo de texto de entrada no se debe borrar cuando el usuario hace clic en un elemento específico.

Intenté usar event.relatedTarget para detectar si el usuario hizo clic no solo en alguna parte, sino en mi <div> específico.

Sin embargo, como puede ver en el siguiente fragmento de código, simplemente no funciona. event.relatedTarget siempre vuelve null !

function lose_focus(event) {
if(event.relatedTarget === null) {
document.getElementById(''text-field'').value = '''';
}
}

.special {
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #000;
margin: 25px 0;
padding: 15px;
}
.special:hover {
cursor: pointer;
}

<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">
<div class="special">Clicking here should not cause clearing!</div>

Answer 1

Respuesta corta: agregue el tabindex="0" a un elemento que debería aparecer en event.relatedTarget .

Explicación: event.relatedTarget contiene un elemento que ganó el foco. Y el problema es que su división específica no puede obtener un enfoque porque el navegador piensa que este elemento no es un botón / campo o algún tipo de elemento de control.

Aquí están los elementos que pueden ganar enfoque por defecto:

• <a> elementos con atributo href especificado
• Elementos <link> con el atributo href especificado
• <button> elementos
• Elementos <input> que no están hidden
• <select> elementos
• elementos <textarea>
• <menuitem> elementos
• elementos con atributo draggable
• Elementos de <audio> y <video> con atributos de controls especificados

Por event.relatedTarget tanto, event.relatedTarget contendrá los elementos anteriores cuando suceda onblur . Todos los demás elementos no se contabilizarán y al hacer clic en ellos se pondrá null en event.relatedTarget .

Pero es posible cambiar este comportamiento. Puede ''marcar'' el elemento DOM como elemento que puede enfocar con el atributo tabindex . Esto es lo que dice standart:

El tabindex contenido de tabindex permite a los autores indicar que se supone que un elemento se puede enfocar, si se debe poder acceder mediante la navegación de enfoque secuencial y, opcionalmente, sugerir dónde aparece el elemento en el orden de navegación de enfoque secuencial.

Así que aquí está el fragmento de código corregido:

function lose_focus(event) {
if(event.relatedTarget === null) {
document.getElementById(''text-field'').value = '''';
}
}

.special {
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #000;
margin: 25px 0;
padding: 15px;
}
.special:hover {
cursor: pointer;
}

<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">
<div tabindex="0" class="special">Clicking here should not cause clearing!</div>