js 复制文本到剪切板|极客笔记

js 复制文本到剪切板

在网页开发中，经常会遇到需要让用户复制文本到剪切板的需求。比如用户点击一个按钮，就能复制某个链接或者其他信息。本文将介绍如何使用 JavaScript 实现这一功能，并附上实际的代码示例。

实现思路

要实现将文本复制到剪切板，我们可以借助 Clipboard API。这个 API 提供了 navigator.clipboard.writeText() 方法，可以将指定的文本复制到剪切板中。我们只需要在用户触发某个事件时调用这个方法，就可以实现复制文本的功能。

示例代码

下面是一个简单的示例，当用户点击按钮时，会复制指定的文本到剪切板中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy Text to Clipboard</title>
</head>
<body>
    <input type="text" id="text-to-copy" value="Hello, World!">
    <button onclick="copyText()">Copy Text</button>

    <script>
        function copyText() {
            const textToCopy = document.getElementById('text-to-copy').value;

            navigator.clipboard.writeText(textToCopy)
                .then(() => {
                    alert('Text copied to clipboard');
                })
                .catch(err => {
                    console.error('Unable to copy text', err);
                });
        }
    </script>
</body>
</html>

在这个示例中，页面上有一个文本框和一个按钮。当用户点击按钮时，会调用 copyText() 函数，将文本框中的内容复制到剪切板中。如果复制成功，会弹出提示框告知用户文本已成功复制；如果复制失败，会在控制台打印错误信息。