Cuando se usa en un <div> con contenteditable=true después de centrarse en ese elemento, Safari (15.5) no parece manejar HTMLElement.blur() normalmente: elimina el borde que resalta el elemento, pero el cursor permanece en el elemento y cualquier la entrada del teclado todavía cae en ese elemento. En otras palabras, el elemento parece perder el foco en parte, pero no del todo. No hay un problema comparable en Firefox, que hace lo que espero: el desenfoque () da como resultado la eliminación total del foco.

Ejemplo:

 function focusInput() { document.getElementById('realtext').focus(); } function shouldBlur() { document.getElementById('realtext').blur(); } function doesBlur() { document.getElementById('realtext').blur(); document.getElementById('pretext').setAttribute("contenteditable","true") document.getElementById('pretext').focus(); document.getElementById('pretext').blur(); document.getElementById('pretext').setAttribute("contenteditable","false") }

 <div id="pretext"></div> <div type="text" id="realtext" value="Sample Text" contenteditable=true></div> <br><br> <button type="button" onclick="focusInput()">Click me to gain focus</button> <button type="button" onclick="shouldBlur()">Click me to lose Focus on Firefox but not Safari</button> <button type="button" onclick="doesBlur()">Click me to really lose focus even on Safari 15.5</button>

¿Es esto un error? El ejemplo anterior sugiere una solución alternativa, pero ¿hay algo mejor que hacer? Soy un novato de JS, así que me pregunto si esas cosas son habituales, me hizo perder mucho tiempo adivinando.

Detalles:

• No hay problema en Safari al aplicar blur() en un elemento <input> , como aquí: ejemplo de MDN HTMLElement.blur()
• document.documentElement.focus() tiene el mismo efecto que blur() en el elemento del que deseamos quitar el foco (este método se recomienda aquí: html.spec.whatwg.org y se cita en la página de MDN anterior). No resuelve el problema en Safari.
• Con un <div> , simplemente cambiar el elemento que debería perder el foco a contenteditable=false parece hacer el trabajo, pero si se establece de nuevo en verdadero, ¡entonces el foco vuelve! Por lo tanto, la única forma que encontré es "distraer" a Safari con otro <div> que no necesita ser editado.