使用 JS 剪贴板 API
现在的状况
- 一般情况下我们会在网页上使用大量的3复制粘贴的操作。
- 但是也可以看到在 360文库中的禁止复制粘贴或者知乎的那样复制粘贴的时候会自动带有一段文字的版权声明。
Clipboard API（剪贴板 API）
- 首先当然是看看各大浏览器的支持程度
- caniuse.com/#feat=clipb…
- 其次研读一下 MDN 的文档
- 属性
ClipboardEvent.clipboardData- 是一个 DataTransfer 对象，它包含了由用户发起的 cut 、 copy 和 paste 动作所影响的带有 MIME 类型的数据。
这是一个实验中的功能 此功能某些浏览器尚在开发中，请参考
浏览器兼容性表(caniuse.com/#feat=clipb…)格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
禁止复制粘贴
<div oncopy="alert('复制被阻止!'); return false;">试着复制这句话!</div>
<h3>Log</h3>
<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
复制粘贴添加版权说明
- 你也可以直接看看 codepen 的代码
<p>这是一篇学术文章：</p>
<p>未经作者允许请勿他用</p>
<textarea id="input" placeholder="复制粘贴这里来"></textarea>
//javascript
<script>
(function(){
//获取复制事件
document.addEventListener('copy', function (event) {
//获取复制的数据
var clipboardData = event.clipboardData || window.clipboardData;
if (!clipboardData) { return; }
//返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置
// 获取当前用户光标选择的文本
var text = window.getSelection().toString();
if (text) {
event.preventDefault();
//重新设置粘贴板的文本
clipboardData.setData('text/plain', text + '\n\n版权所有，商用必究');
}
});
})()
</script>
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();
}
});
