是否可以从多个元素中获取 select 文本？

Question

使用 java 脚本，您可以进行选择。 这相当于用鼠标选择 cursor。我添加到问题中的代码选择了您单击的容器内的每个元素，但之前的选择消失了。 这可以改变吗？

 const selectElement = (element) => { const range = document.createRange(); range.selectNode(element); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } const container = document.getElementById("container"); container.addEventListener('click', (event) => { const x = event.pageX; const y = event.pageY; selectElement(document.elementFromPoint(x, y)); });

 <!DOCTYPE html> <html lang="en"> <head> <title>Code snippet</title> </head> <body> <div id="container"> <div id="firstElement"> First element text </div> <div id="secondElement"> Second element text </div> </div> </body> </html>

编辑：为了更好地理解，我添加了第二个代码段来执行我想要的操作，但没有使用window.getSelection().addRange() 。

 const selectElement = (element) => { element.style.backgroundColor = 'blue'; element.style.color = 'white'; } const container = document.getElementById("container"); container.addEventListener('click', (event) => { const x = event.pageX; const y = event.pageY; selectElement(document.elementFromPoint(x, y)); });

 <!DOCTYPE html> <html lang="en"> <head> <title>Code snippet</title> </head> <body> <div id="container"> <div id="firstElement"> First element text </div> <div id="secondElement"> Second element text </div> </div> </body> </html>

Answer 1

根据非常标准的 UI 选择行为，移动焦点和/或单击元素通常（总是？）删除先前的选择。

如果您想保留以前的选择范围，则需要单独存储它们并将它们重新添加到窗口的选择范围中。

显然，这与任何用户的期望都背道而驰，但我不会假设你为什么想要这个:)

 var ranges = []; const selectElement = (element) => { const range = document.createRange(); range.selectNode(element); ranges.push(range); const selection = window.getSelection(); ranges.forEach(r => selection.addRange(r)); } const container = document.getElementById("container"); container.addEventListener('click', (event) => { selectElement(event.target); });

 <!DOCTYPE html> <html lang="en"> <head> <title>Code snippet</title> </head> <body> <div id="container"> <div id="firstElement"> First element text </div> <div id="secondElement"> Second element text </div> </div> </body> </html>

请注意，如果您在容器 div 外部单击，则会清除选择 - 这是标准行为，并且由于您的事件侦听器仅在 div 上，因此不会恢复选择。 如果您想更改它，请将您的事件侦听器移动到正文。

Answer 2

这只能在 FireFox 浏览器中完成。

查看 MDN Web 文档上的Selection.addRange() 页面。

您将看到一条注释：

注意：目前只有 Firefox 支持多个选择范围，如果已经包含一个，其他浏览器将不会向选择添加新范围。

是否可以从多个元素中获取 select 文本？

问题描述

1 个解决方案

解决方案1
0 2021-11-30 20:00:29

解决方案2
0 已采纳 2021-11-30 20:17:50

是否可以从多个元素中获取 select 文本？

问题描述

1 个解决方案

解决方案1 0 2021-11-30 20:00:29

解决方案2 0 已采纳 2021-11-30 20:17:50

解决方案1
0 2021-11-30 20:00:29

解决方案2
0 已采纳 2021-11-30 20:17:50