html禁止复制和实现复制

目录

一、禁止复制

1、css实现

2、js实现

二、实现复制

1、Document.execCommand() 方法

2、异步 Clipboard API

---

一、禁止复制

1、css实现

通过css3中的user-select 属性规定是否能选取元素的文本，设置为none阻止用户选中内容。

只能实现禁止复制，对于粘贴、剪贴并不能控制，通过js方法可以实现此功能。

 user-select语法：user-select：none |text| all | auto(默认值)

今天的主角是none。

<style>
  *{
     -moz-user-select:none; /* Firefox */
     -webkit-user-select:none; /* WebKit内核 */
     -ms-user-select:none; /* IE10及以后 */
     -khtml-user-select:none; /* 早期浏览器 */
     -o-user-select:none; /* Opera */
     user-select:none; /* CSS3属性 */
  }
</style>

2、js实现

禁止选取，实现逻辑和css差不多，选不中就复制不了。

document.oncontextmenu=function(e){return false;}; // 禁止右键
document.onselectstart=function(e){return false;}; // 禁止选取

禁止粘贴、复制、剪贴，内容还可以选中，右键也有粘贴、复制、剪贴功能，只是没有效果而已。

document.onpaste=function(e){return false;}; // 禁止粘贴
document.oncopy=function(e){return false;}; // 禁止复制
document.oncut=function(e){return false;}; // 禁止剪贴

二、实现复制

1、Document.execCommand() 方法

Document.execCommand() 是操作剪贴板的传统方法，各种浏览器都支持。

const inputElement = document.getElementById('input');
inputElement.select();
document.execCommand('copy')（复制）
// document.execCommand('cut')（剪切）
// document.execCommand('paste')（粘贴）
// 或者
let copyInput = document.createElement("input"); // 创建input元素
document.body.appendChild(copyInput); // 向页面底部追加输入框
copyInput.setAttribute("value", emailUrl); // 添加属性，将url赋值给input元素的value属性
copyInput.select(); // 选择input元素
document.execCommand("Copy"); // 执行复制命令
copyInput.remove();

2、异步 Clipboard API

Clipboard是异步，返回 Promise 对象。

Clipboard.writeText()方法用于将文本内容写入剪贴板。

navigator.clipboard.writeText('这是一段文字');

Clipboard.write()方法用于将任意数据写入剪贴板。

let data = new DataTransfer();
data.items.add('text/plain', <div>这又是一段文字</div>);
navigator.clipboard.write(data);

Clipboard.read()方法用于复制剪贴板里面的数据，需要用户授权，否则会报错，最好使用

try...catch。

let data = await navigator.clipboard.read();

Clipboard.readText()方法用于复制剪贴板里面的文本数据，需要用户授权，否则会报错，最好使

用try...catch。

let data = await navigator.clipboard.readText();

如果写的不好或者大家有更好的方法，可以多多留言，大家一起进步。