在前端开发中，实现选中复制的功能通常涉及到两个步骤：首先，需要让用户能够选中文本；其次，需要提供一个按钮或触发机制来复制选中的文本。以下是一个简单的示例，使用JavaScript和HTML来实现这个功能：
- HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选中复制示例</title>
</head>
<body>
<p id="textToCopy">这是一段可以被复制的文本。</p>
<button id="copyButton">复制</button>
<script src="script.js"></script>
</body>
</html>
- JavaScript部分 (script.js)：
document.addEventListener('DOMContentLoaded', function() {
var textToCopy = document.getElementById('textToCopy');
var copyButton = document.getElementById('copyButton');
var selectedText = '';
// 监听文本的选择事件
textToCopy.addEventListener('mouseup', function() {
// 使用getSelection API来获取选中的文本
var selection = window.getSelection();
selectedText = selection.toString();
});
// 监听复制按钮的点击事件
copyButton.addEventListener('click', function() {
if (selectedText) {
// 使用navigator.clipboard API来复制文本
navigator.clipboard.writeText(selectedText).then(function() {
console.log('复制成功！');
}).catch(function(error) {
console.error('复制失败:', error);
});
} else {
alert('请先选中要复制的文本！');
}
});
});
注意：navigator.clipboard API 可能不在所有浏览器中都被支持，或者可能需要HTTPS环境才能正常工作。如果你需要在不支持这个API的浏览器中实现复制功能，你可能需要使用其他方法，比如创建一个隐藏的<textarea>元素，将文本设置到其中，然后选择并复制这个元素的内容。
另外，这个示例中的代码仅用于演示目的，并没有处理所有可能的边缘情况。在实际项目中，你可能需要添加更多的错误处理和用户交互反馈。
标签：function,功能,selectedText,复制,选中,文本,API From： https://www.cnblogs.com/ai888/p/18609284