使用 JS 剪贴板 API

使用 JS 剪贴板 API

现在的状况

一般情况下我们会在网页上使用大量的3复制粘贴的操作。但是也可以看到在 360文库中的禁止复制粘贴或者知乎的那样复制粘贴的时候会自动带有一段文字的版权声明。

Clipboard API（剪贴板 API）

首先当然是看看各大浏览器的支持程度caniuse.com/#feat=clipb…其次研读一下 MDN 的文档 属性ClipboardEvent.clipboardData是一个 DataTransfer 对象，它包含了由用户发起的 cut  、 copy  和 paste  动作所影响的带有 MIME 类型的数据。

这是一个实验中的功能 此功能某些浏览器尚在开发中，请参考浏览器兼容性表(caniuse.com/#feat=clipb…)格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

禁止复制粘贴

试着复制这句话!Log

复制粘贴添加版权说明

你也可以直接看看 codepen 的代码

这是一篇学术文章：未经作者允许请勿他用//javascript

JS改变剪切板内容

当我们拖拽文本进入输入框的时候,有时候需要的文字格式有所变化，我们可以直接进行处理

比如 138-1231-123

复制粘贴后就 1381231123

使用 drop 来实现

input.addEventListener('drop', function (event) {
    // 获取拖拽文本内容
    var text = event.dataTransfer.getData('text');
    if (this.value == '' && text.match(/\d/g) && text.match(/\d/g).length == 11) {
        event.preventDefault();
        input.value = text.replace(/\D/g, '');
        input.select();
    }
});

引用

can i use / clipboardMDN / ClipboardEvent张鑫旭 / 利用剪切板JS API优化输入框的粘贴体验