浏览器监听文本选择
编辑
20
2024-09-07
可以使用 window.getSelection()
API 来获取当前的文本选择,并监听相关的事件
示例代码
演示地址:https://www.yhc.red/text-selection-listener-example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Selection Listener Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
p {
cursor: text;
}
</style>
</head>
<body>
<h1>Text Selection Listener Example</h1>
<p>
选择下面的文本试试看:
<br>
这是一段示例文本,您可以选择其中的一部分或全部内容,看看控制台中的输出。
<br>
当您选择文本时,将在控制台中显示所选文本,并尝试将其复制到剪贴板。
</p>
<p>您选择的是:<span style="color: red;"></span></p>
<script>
// 检查是否支持 Text Selection API
if ('getSelection' in window) {
// 监听文本选择的变化
document.addEventListener('mouseup', handleSelectionChange);
} else {
console.error('Your browser does not support the Text Selection API.');
}
// 处理文本选择变化的事件
function handleSelectionChange(event) {
const selection = window.getSelection();
// 检查是否有文本被选中
if (selection.rangeCount > 0) {
const selectedText = selection.toString();
console.log('Selected Text:', selectedText);
document.getElementsByTagName('span')[0].innerText = selectedText
// 在这里可以执行其他操作,如复制到剪贴板等
navigator.clipboard.writeText(selectedText).then(() => {
console.log('Text copied to clipboard.');
}, (err) => {
console.error('Failed to copy text: ', err);
});
}
}
</script>
</body>
</html>
兼容性和注意事项
浏览器支持
确保您的浏览器支持
window.getSelection()
API。现代浏览器都支持这一 API
事件监听
除了
mouseup
事件外,还可以监听其他与文本选择相关的事件,如mousedown
、mousemove
等,以实现更复杂的逻辑
剪切板 API
navigator.clipboard.writeText()
用于将文本复制到剪贴板,但需要注意,该 API 在一些老版本的浏览器中可能不受支持。在 Firefox 中,从版本 60 开始支持此 API
拓展功能
如果需要更精细地控制文本选择,可以监听多个事件,并且在这些事件中更新状态。例如,可以监听 mousedown
、mouseup
、mousemove
事件来获取更详细的用户交互信息
- 0
- 0
-
分享