div { border: 3px solid black; } span { border: 2px solid blue; } <div contenteditable> <span contenteditable id="haha"><i>asd</i></span> </div> Quiero centrarme en #haha , pero solo funciona si muevo el elemento fuera del div
div { border: 3px solid black; } span { border: 2px solid blue; } <div contenteditable> </div> <span contenteditable id="haha"><i>asd</i></span>Actualmente usando este código para el foco, ¿hay alguna manera de enfocarse en el elemento span incluso si está dentro del div?
document.querySelector(`#haha`).focus();Intente configurar tabindex="0" . Permite que los elementos que normalmente no son enfocables reciban el foco
div { border: 3px solid black; } span { border: 2px solid blue; } span:focus{ border-color: green; } <div contenteditable> <span tabindex="0" contenteditable id="haha"><i>asd</i></span> </div>Prueba document.getElementById("haha") (nota que eliminé el '#')
El método Document getElementById() devuelve un objeto Element que representa el elemento cuya propiedad id coincide con la cadena especificada. Dado que los ID de los elementos deben ser únicos si se especifican, son una forma útil de obtener acceso a un elemento específico rápidamente.
EDITAR:
Parece que manipular el tabindex permite que esto funcione:
myFunction = function() { let x = document.getElementById("haha"); x.setAttribute('tabindex', '0'); x.focus(); } myFunction(); <div contenteditable> <span contenteditable="true" id="haha">asd</span> </div> <button class="bold">Bold</button> <div contenteditable="true"> whatever </div> <button class="bold">Bold</button>Debe agregar algo de texto en el div . Luego, cada uno tendrá su propio contenido para editar.
div[contenteditable] { border: 3px solid black; } span { border: 2px solid blue; } <div contenteditable>div<span contenteditable id="haha">span</span></div>