Actualmente estoy desarrollando una aplicación web que consta de diferentes paneles y áreas. Un panel contiene una tabla enorme, otro panel contiene un cuadro de descripción, etc.
Por lo general, los usuarios pueden arrastrar el mouse y seleccionar cualquier rango de texto dentro de una página html. Quiero que el usuario solo pueda seleccionar texto dentro de un panel o hasta una barrera.
Por ejemplo, cuando la tabla está enfocada, seleccionar texto con el mouse o presionar Ctrl-A solo debería seleccionar texto dentro de ella. No todos los textos seleccionables en la página.
<div id="application"> <p>Not this text</p> <div id="another-panel">Nor that</div> <div id="special-panel-including-big-table"> Hitting Ctrl-A here should only select THIS text </div> </div>Necesito definir de alguna manera una barrera en un elemento principal (como el panel de la tabla) que impida expandir la selección más arriba en el árbol DOM.
Consulté https://developer.mozilla.org/en-US/docs/Web/API/Selection y https://w3c.github.io/selection-api/
Intenté usar stopPropagation() en eventos de inicio de arrastre, pero esto no parece tener ningún efecto.
Puede evitar la selección predeterminada con e.preventDefault() y crear su propia selección en su lugar.
Si su tabla contiene elementos de entrada que pueden enfocarse, puede crear una verificación adicional para eso. Eso no está incluido en mi ejemplo.
document.addEventListener('keydown', (e) => { if(e.ctrlKey && e.key === 'a') { //Prevent the default select all e.preventDefault(); //Select only the contents of div#special-panel-including-big-table var targetEl = document.getElementById('special-panel-including-big-table'); var range; if (window.getSelection && document.createRange) { var selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(targetEl); selection.removeAllRanges(); selection.addRange(range); } } }); <div id="application"> <p>Not this text</p> <div id="another-panel">Nor that</div> <div id="special-panel-including-big-table"> Hitting Ctrl-A here should only select THIS text </div> </div>