javascript - 选择文本并突出显示所选或获取所选值( react )

Question

我有一个显示一些跨度的 React 应用程序:

<span>Hello</span> <span>my</span> <span>name</span> <span> is </span> ...

我希望用户像这样用鼠标选择文本

..然后获取选定的值，或突出显示文本等。我将如何在 React 中执行此操作？我不确定要使用什么事件处理程序以及如何掌握当前选择!一个最小的例子或提示将不胜感激!

Answer 1

使用 onMouseUp 和 onDoubleClick 事件来检测调用方法，这将使用 JavaScript Selection API 确定选择。

使用window.getSelection()获取选择对象。

要获取选定的文本，请使用 window.getSelection.toString()。

要获取选定文本区域的坐标以呈现弹出菜单，请使用 selection.getRangeAt(0).getBoundingClientRect()。

作为示例实现，请查看 react-highlight图书馆。