Выделите текст только одной строкой из группы div

Question

Фон

Я пытаюсь выделить текст внутри одного элемента div из группы элементов div и получить его начальный и конечный индексы.

Я использую mouseup событие для захвата выделения текста пользователем.

---

Текущая ситуация

В одно и то же время выбирается более одного элемента div, как показано нижеснимок экрана.

---

Ожидаемый результат

Если активно выбран один элемент div, пользователь должен иметь возможностьвыберите этот элемент div только после поднятия мыши.

Как и на портале Google DialogFlow, пользователь может выбрать только одно предложение за один раз.Для выбора следующего предложения он должен перейти к следующей строке, чтобы выделить ее, что показано на снимке экрана ниже.

Эточасть приложения stackblitz link , которую я пытаюсь создать, которая содержит как воспроизвести проблему и дать решение.

Я не могу придумать способыКак добиться этого, любая помощь будет принята с благодарностью.

---

Answer 1

Вы можете установить свойство CSS user-select на none в контейнере строк, что полностью запретит выделение текста, а затем при нажатии мыши включить выбор текста только в одну строку.

Сброс свойства user-select немного сложен, потому что он немедленно удалит выделение, поэтому вам действительно нужно запомнить, какая линия была выделена, и сбросить ее при следующем событии нажатия мыши.

let lastTarget;

function handleMouseDown(event) {
  let target = event.target;
  
  if (lastTarget) {
    lastTarget.style.userSelect = '';
  }
  
  if (target.tagName === 'SPAN') {
    target = target.parentElement;
  }
  
  target.style.userSelect = 'text';
  
  document.onmouseup = function () {
    lastTarget = target;
    document.onmouseup = null;
  }
}

container.addEventListener('mousedown', handleMouseDown);

#container {
  user-select: none;
}

#container > div  > span {
  cursor: text;
}

<div id="container">
  <div><span>If one div element is selected actively the user should be able to only select that div element after lifting the mouse.</span></div>
  <div><span>If one div element is selected actively the user should be able to only select that div element after lifting the mouse.</span></div>
  <div><span>If one div element is selected actively the user should be able to only select that div element after lifting the mouse.</span></div>
  <div><span>If one div element is selected actively the user should be able to only select that div element after lifting the mouse.</span></div>
</div>

Answer 2

Если текст в элементах div никогда не будет равен, делайте текст div'а indexOf (selection), он вернет false, если выбран текст из нескольких элементов div.