从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的text indexOf（selection），如果选择了多个div中的文本，则返回false。