Tengo una muestra en Encontrar el intervalo actualmente enfocado en un div editable .
El div editable, es decir, un div que tiene el atributo contenteditable="true" , contiene 3 tramos diferentes con cada tramo envuelto en un div. Un usuario podría colocar el cursor en cualquiera de los tres intervalos. Mi objetivo es averiguar qué tramo se está editando cuando el usuario hace clic en un contenido de tramo para comenzar a editar o escribir en él. Me gustaría que esto funcione en computadoras de escritorio o dispositivos móviles.
Intenté obtener el lapso usando document.activeElement como puede ver en mi ejemplo de código, pero obtiene el div editable y no el lapso actual. Estaba buscando una solución de JavaScript para este problema.
Pregunta: ¿Cómo obtendría la identificación del elemento span cuyo texto se está editando usando JavaScript?
Código HTML
<div id="input" contenteditable="true" onfocus="findCurrentSpan(this)"> <div> <span id="first">first span</span> </div> <div> <span id="second">second span</span> </div> <div> <span id="third">third span</span> </div> </div> <p id="info" style="color:green"> </p>código JavaScript
function findCurrentSpan(editor) { var element = document.getElementById("input"); var currentSpan = document.activeElement; document.getElementById("info").innerHTML = "Active element's id is " + currentSpan.id;}
El problema es que vas a seleccionar el elemento activo de toda la página, por eso se llama document.activElement.
Eche un vistazo a esta pregunta SO Obtener y establecer la posición del cursor con div contenteditable
En su ejemplo findCurrentSpan(this) , this se refiere a la función findCurrentSpan() , por lo que this.id tendrá la entrada de valor.
<div id="input" contenteditable="true" onfocus="findCurrentSpan(this)"> Para resolver su problema, le recomiendo que vincule un evento onfocus a todos los elementos secundarios de input ( explicación sobre cómo funciona el evento onfocus en javascript ).
Así es como selecciona todos los elementos de intervalo dentro input :
var children = document.getElementById("input").querySelectorAll('span'); Después de seleccionar los elementos a los que desea vincular un evento. Utilice un bucle para vincular un evento a todos los elementos. Por lo que sé, span no implementa un estado de focus , por lo que tendremos que usar click .
children.forEach(function(e) { document.getElementById(e.id).addEventListener("click", findCurrentSpan) })El código se verá así:
function findCurrentSpan() { console.log(this.id) document.getElementById("info").innerHTML = "Active element's id is " + this.id; } var children = document.getElementById("input").querySelectorAll('span'); children.forEach(function(e){ document.getElementById(e.id).addEventListener("click", findCurrentSpan) })