原生JS监听复制事件,更改复制的内容,或者在复制内容后面追加参数
原生 JS 监听 复制 copy 事件,追加版权信息:
<div class="empty-font">选中这一段文字,点击 ctrl+C 或 者右键选择复制</div>
<script type="text/javascript">
//监听整个页面的 copy 事件
document.addEventListener('copy',function(e){
// clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
let clipboardData = e.clipboardData || window.clipboardData;
// 如果 未复制或者未剪切,直接 return
if(!clipboardData) return ;
// Selection 对象 表示用户选择的文本范围或光标的当前位置。
// 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
let text = window.getSelection().toString();
if(text){
// 如果文本存在,首先取消默认行为
e.preventDefault();
// 通过调用 clipboardData 对象的 setData(format,data) 方法,设置相关文本
// format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型
// data 一个 DOMString 表示要添加到 drag object 的数据
clipboardData.setData('text/plain', text + '
这是追加的版权内容')
}
})
</script>
原生JS控制按钮点击复制自定义内容,复制想要让复制的内容
原生 JS 点击按钮复制自定义内容:
<button type="button" onclick="copyTxt('这是复制的内容')">复制内容</button>
<script type="text/javascript">
//原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)
function copyTxt(text){
if(typeof document.execCommand!=="function"){
alert("复制失败,请长按复制");
return;
}
var dom = document.createElement("textarea");
dom.value = text;
dom.setAttribute('style', 'display: block; 1px;height: 1px;');
document.body.appendChild(dom);
dom.select();
var result = document.execCommand('copy');
document.body.removeChild(dom);
if (result) {
alert("复制成功");
return;
}
if(typeof document.createRange!=="function"){
alert("复制失败,请长按复制");
return;
}
var range = document.createRange();
var div=document.createElement('div');
div.innerHTML=text;
div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;');
document.body.appendChild(div);
range.selectNode(div);
const selection = window.getSelection();
if (selection.rangeCount > 0){
selection.removeAllRanges();
}
selection.addRange(range);
document.execCommand('copy');
alert("复制成功")
}
</script>