0
289
ViewsDetectar clic en texto en div contenteditable
Me gustaría permitir la edición de texto cuando se hace clic en el texto real. El resto del espacio en blanco lo necesito para una funcionalidad de arrastre.
¿Hay alguna forma de detectar cuando el mouse hace clic en el texto en lugar de un espacio en blanco en un div editable?
¿Hay tal vez algún CSS que pueda agregar a un div que envuelva el texto y no el espacio en blanco? ¿O hay algún Javascript que pueda indicar cuándo el usuario hizo clic en el texto?
<div class="container"> <div class="textbox" contenteditable="true"></div> </div> .container{ min-width: 100px; width: min-content; height: min-content; padding: 10px; border: 1px solid black; } .textbox{ min-width: 100px; width: min-content; }2 answers
Answer question0
Una solución sería insertar cada texto en una etiqueta <p> . El <p> se extenderá por todo el contenedor. Dentro de <p> , envolvería cada parte del texto en una etiqueta <span> . Entonces, cada vez que los usuarios hacen clic en el texto, el objetivo del evento sería el elemento span, y cuando los usuarios hacen clic en el espacio en blanco, el objetivo del evento sería el elemento ap.
document.querySelector(".container").addEventListener("click", function(e){ if(e.target.localName == "p") { //whitespace } if(e.target.localName == "span") { //text } });0
No creo que puedas verificar si alguien hizo clic en el espacio vacío de un elemento.
La mejor manera de hacer esto es crear div como el borde del cuadro de texto y verificar con javascript si el usuario hizo clic en el borde.
document.getElementById("drag-border").addEventListener("click",function(event){ //This if blocks calling rest of function when user clicks on textbox and not on border if (event.currentTarget !== event.target) { return; } console.log( "Clicked on border" ); }); .container{ min-width: 100px; width: min-content; height: min-content; } .textbox{ min-width: 100px; width: min-content; border: 1px solid black; background: white; } #drag-border{ background: red; padding: 10px; border: 1px solid black; } <div class="container"> <div id="drag-border"> <div class="textbox" contenteditable="true"></div> </div> </div>