js点击复制全选文字

在JavaScript中实现点击复制全选文字的功能，通常涉及到以下几个基础概念：

基础概念

Clipboard API：这是一个现代的、基于Promise的API，用于访问剪贴板。它提供了writeText方法来将文本写入剪贴板。
Selection API：这个API允许开发者获取和操作用户选择的文本。
Event Handling：通过事件监听器（如click事件）来触发复制操作。

实现步骤

以下是一个简单的示例代码，展示了如何实现点击按钮复制页面上所有选中的文本：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Copy Selected Text</title>
</head>
<body>

<p>Select some text in this paragraph and then click the button.</p>
<button id="copyButton">Copy Selected Text</button>

<script>
document.getElementById('copyButton').addEventListener('click', async () => {
    try {
        // 获取当前选中的文本
        const selectedText = window.getSelection().toString();
        
        if (selectedText) {
            // 使用Clipboard API将文本写入剪贴板
            await navigator.clipboard.writeText(selectedText);
            alert('Text copied to clipboard!');
        } else {
            alert('No text selected!');
        }
    } catch (err) {
        console.error('Failed to copy text: ', err);
        alert('Failed to copy text. Please try again.');
    }
});
</script>

</body>
</html>