关于前端:剪切板

写我的项目的时候须要用到剪切板的性能，参考我的项目里的写法，用到了 document.execCommand（）办法。

1 const text = "这是待复制待内容"  
2 const input = document.createElement('input'); // 间接构建 input
3 document.body.appendChild(input);  // 增加长期元素
4 input.value =  text;  // 设置内容
5 input.select();  // 抉择元素
6 const result = document.execCommand('copy'); // 执行复制
7 document.body.removeChild(input);  // 删除长期元素

看 webstrom 提醒发现，这个办法是弃用的符号。

之后就想着看看当初用什么来代替。

查看官网文档

MD5 官网文档: https://developer.mozilla.org…

同样能够看到，说该办法曾经弃用了。

剪贴板 Clipboard API 为 Navigator 接口增加了只读属性 clipboard，该属性返回一个能够读写剪切板内容的 Clipboard 对象。

示例中举荐写法：

复制到剪切板：

const text = "这是待复制待内容";

navigator.clipboard.writeText(text).then(() => {console.log("胜利");
        },
        () => {console.log("失败");
        }

从剪切板中读取：

 navigator.clipboard.readText().then(text => console.log('剪切板信息为', text)
);

在剪切板为空或者不蕴含文本时，readText() 会返回一个空字符串。

运行后果:

不过依据兼容性表看，有一些浏览器并不兼容这个 api, 比方火狐。

尽管 document.execCommand 曾经过期，但显著有更大的兼容性。

如同 Clipboard API 文档中所写：

The navigator.clipboard API is a recent addition to the specification and may not be fully implemented in all browsers.

对该 API 的反对还不宽泛。

所以最初还是用了document.execCommand("copy");

使其有更宽泛的浏览器覆盖范围。