Estoy tratando de crear un editor de texto personalizado en React, por lo tanto, he creado un div que tiene un atributo contentEditable . Ahora quiero realizar alguna acción cuando el usuario seleccione una parte del texto ingresado. Para hacer eso, estoy usando el evento de select como atributo onSelect en mi div. El problema es que el evento de select se ejecuta no solo al seleccionar el texto, sino también cuando hago clic en el cuadro de entrada o después de cualquier entrada. ¿Cómo puedo evitarlo, para que se active solo cuando se selecciona el texto?
Componente:
function EditorBody(props) { return ( <div className="editor-body"> <div className="text-section" contentEditable role="textbox" placeholder="Text goes here ..." onSelect={() => window.alert("You've selected a text")} // Runs after every input, not only when the text is selected ></div> </div> ); } export default EditorBody;Puede cambiar la lógica en su onSelect para poder determinar si ejecutar o no la lógica seleccionada.
onSelect={(event) => { if (document.getSelection().toString().length > 0) { // your selection logic window.alert(document.getSelection().toString()); } }}De esta manera, la lógica se ejecutará solo si el usuario está seleccionando algo y no en otros eventos primarios que puedan desencadenar el evento de selección secundario (enfoque, pulsación de tecla, etc.).