控制文字复制

创作时间:

作者:

@小白创作中心

控制文字复制

引用

来源

https://docs.pingcode.com/baike/2505035

在网页开发中，有时需要控制用户对页面文字的复制行为。本文将详细介绍如何使用JavaScript实现这一功能，包括通过CSS样式、JavaScript事件监听器和Clipboard API等方法。

一、通过CSS样式控制复制行为

CSS可以简单地设置某些元素不可选中，从而避免用户复制其中的文字。这种方法的优点是实现简单，但也有局限性。

.unselectable {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

将上述CSS样式应用于你想要禁止复制的元素：

<div class="unselectable">
    这段文字不能被选中和复制。
</div>

二、利用JavaScript事件监听器

通过JavaScript事件监听器，你可以更灵活地控制文字的复制行为。例如，你可以选择性地允许某些内容被复制，或在用户复制内容后执行特定的操作。

1. 禁用复制事件

你可以通过监听 copy 事件来禁用文字的复制：

document.addEventListener('copy', function(e) {
    e.preventDefault();
    alert('复制功能已被禁用');
});

2. 自定义复制内容

你还可以自定义用户复制的内容。例如，当用户复制某段文字时，你可以附加特定的信息：

document.addEventListener('copy', function(e) {
    e.preventDefault();
    let copiedText = window.getSelection().toString() + '\n\n附加信息：请勿随意复制！';
    e.clipboardData.setData('text/plain', copiedText);
});

三、利用Clipboard API

Clipboard API提供了一种更现代和强大的方式来控制剪贴板操作。通过该API，你可以直接读取和写入剪贴板内容。

1. 写入剪贴板

使用Clipboard API写入剪贴板内容：

navigator.clipboard.writeText('这是被复制的内容')
    .then(function() {
        console.log('复制成功');
    })
    .catch(function(err) {
        console.error('复制失败', err);
    });

2. 读取剪贴板内容

你还可以读取剪贴板的内容：

navigator.clipboard.readText()
    .then(function(text) {
        console.log('读取到的剪贴板内容: ', text);
    })
    .catch(function(err) {
        console.error('读取剪贴板内容失败', err);
    });

四、结合HTML和JavaScript实现

结合HTML和JavaScript，你可以实现一个更加复杂的复制控制逻辑。下面是一个具体的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制文字复制</title>
    <style>
        .copyable {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="copyable" id="textToCopy">
        这段文字可以被复制。
    </div>
    <button onclick="copyText()">复制文字</button>
    <script>
        function copyText() {
            const textToCopy = document.getElementById('textToCopy').innerText;
            navigator.clipboard.writeText(textToCopy)
                .then(() => {
                    alert('文字复制成功');
                })
                .catch(err => {
                    console.error('复制失败', err);
                });
        }
    </script>
</body>
</html>