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 debe borrarse cuando el usuario hace clic en un elemento específico.
Traté de usar event.relatedTarget para detectar si el usuario hizo clic no solo en algún lugar sino en mi <div> específico.
Sin embargo, como puede ver en el fragmento a continuación, simplemente no funciona. event.relatedTarget siempre devuelve 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>Respuesta corta: agregue tabindex="0" a un elemento que debería aparecer en event.relatedTarget .
Explicación: event.relatedTarget contiene un elemento que obtuvo el foco. Y el problema es que su div específico no puede enfocarse porque el navegador piensa que este elemento no es un botón/campo o algún tipo de elemento de control.
Estos son los elementos que pueden obtener el foco de forma predeterminada:
<a>elementos con el atributohrefespecificado- Elementos
<link>con el atributohrefespecificado<button>elementos<input>elementos que no estánhidden<select>elementos<textarea>elementos<menuitem>elementos- elementos con atributo
draggable- Elementos
<audio>y<video>con atributo decontrolsespecificado
Entonces event.relatedTarget contendrá los elementos anteriores cuando ocurra onblur . Todos los demás elementos no se contarán y hacer clic en ellos pondrá null en event.relatedTarget .
Pero es posible cambiar este comportamiento. Puede 'marcar' el elemento DOM como elemento que puede enfocarse con el atributo tabindex . Esto es lo que dice estándar:
El atributo de contenido
tabindexpermite a los autores indicar que se supone que un elemento se puede enfocar, si se supone que se puede acceder a él mediante la navegación de enfoque secuencial y, opcionalmente, sugerir en qué lugar del orden de navegación de enfoque secuencial aparece el elemento.
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>