码上焚香

Yahocen

浏览器监听文本选择

Web
27
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>

兼容性和注意事项

  1. 浏览器支持

    1. 确保您的浏览器支持 window.getSelection() API。现代浏览器都支持这一 API

  2. 事件监听

    1. 除了 mouseup 事件外，还可以监听其他与文本选择相关的事件，如 mousedown、mousemove 等，以实现更复杂的逻辑

  3. 剪切板 API

    1. navigator.clipboard.writeText() 用于将文本复制到剪贴板，但需要注意，该 API 在一些老版本的浏览器中可能不受支持。在 Firefox 中，从版本 60 开始支持此 API

拓展功能

如果需要更精细地控制文本选择，可以监听多个事件，并且在这些事件中更新状态。例如，可以监听 mousedown、mouseup、mousemove 事件来获取更详细的用户交互信息

#原创 49
细说 ArrayList
浏览器语音合成（Speech Synthesis）