Блог

В настоящее время я разрабатываю веб-приложение, состоящее из различных панелей и областей. Одна панель содержит огромную таблицу, другая панель содержит поле описания и т. Д.

Обычно пользователи могут перетащить мышь и выбрать любой диапазон текста внутри html-страницы. Я хочу, чтобы пользователь мог выбирать текст только внутри одной панели или до барьера.

Например, когда таблица находится в фокусе, выделение текста с помощью мыши или нажатие клавиши Ctrl-A должно выделять только текст внутри нее. Не каждый выбираемый текст на странице.

 <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>
 

Мне нужно каким-то образом определить барьер на родительском элементе (например, на панели таблицы), который не позволяет расширить выделение дальше по дереву DOM.

Я консультировался https://developer.mozilla.org/en-US/docs/Web/API/Selection и https://w3c.github.io/selection-api/

Я пытался использовать stopPropagation() для событий перетаскивания, но это, похоже, не возымело никакого эффекта.

Вы можете запретить выбор по умолчанию e.preventDefault() и вместо этого создать свой собственный выбор.

Если ваша таблица содержит входные элементы, которые могут привлечь внимание, вы можете создать дополнительную проверку для этого. Это не входит в мой пример.

 document.addEventListener('keydown', (e) => {
  if(e.ctrlKey amp;amp; 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 amp;amp; 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>