js设置剪贴板数据 event.clipboardData.setData("text/plain",value);不起作用,并非所有的浏览器都支持,限制了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var EventUtil={
getClipboardData:function(event){
var clipboardData=(event.clipboardData||window.clipboardData);
return clipboardData.getData("text");
},
setClipboardData:function(event,value){
if(event.clipboardData){
//return event.clipboardData.setData("text",value);
return event.clipboardData.setData("text/plain",value);
}else if(window.clipboardData){
return window.clipboardData.setData("text",value);
}
},
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
getEvent:function(event){
return event?event:window.event;
},
preventDefault:function(event){
if(event.preventDefault)
event.preventDefault();
else
event.returnValue=false;
}
}
function trimall(txt){
/*txt=txt.replace(/^\\s+/,'');
alert(txt);
txt=txt.replace(/\s+$/,'');
alert(txt);*/
txt=txt.replace(/(^\s*)|(\s*$)/g,"");
return txt; 
}

function doit(){
/*var txt=document.getElementById("ipt1").value;
alert(txt.length);
txt=trimall(txt);
alert(txt.length);
document.getElementById("ipt1").value=EventUtil.getClipboardData(event);*/
alert(EventUtil.getClipboardData(event));
}
</script>
<body>
<input id="ipt1" />
<input type="button" onclick="javascript:doit();"/>
</body>
<script type="text/javascript">
EventUtil.addHandler(document.getElementById("ipt1"),"paste",function adjustInput(event){
alert(EventUtil.getClipboardData(event));
event=EventUtil.getEvent(event);
var txt=EventUtil.getClipboardData(event);
txt=trimall(txt);

//event.clipboardData.setData("text/plain",value);不起作用,并非所有的浏览器都支持,限制了
//var rst=EventUtil.setClipboardData(event,txt);

EventUtil.preventDefault(event);
document.getElementById("ipt1").value=txt;
});
</script>
</html>
使用 JavaScript 在粘贴前修改复制或剪贴内容,可通过监听 `copy` 事件并结合 `Clipboard API` 或 `document.execCommand` 方法来实现。 ### 方法一:使用 `document.execCommand` 结合 `Clipboard API` 下面是一个示例代码,创建一个按钮,点击按钮时复制内容,并在复制时添加额外信息: ```javascript const btn = document.querySelector("#btn"); btn.addEventListener("click", function() { // 创建一个 input 框 const input = document.createElement("input"); // 设置 input 框内容 input.setAttribute("value", "copy content"); // 添加到 body 元素中 document.body.appendChild(input); // 将新添加进去的 input 元素进行选中 input.select(); // 为 input 添加监听事件方便对剪贴板内容进行二次修改 input.addEventListener("copy", function(event) { // 使用 ClipboardApi 来设置剪贴板里的内容 var clipboardData = event.clipboardData || window.clipboardData; if (!clipboardData) { return; } var text = window.getSelection().toString(); if (text) { event.preventDefault(); clipboardData.setData("text/plain", text + "\n\n 我是添加进来的内容"); } }); // 执行复制操作 if (document.execCommand("copy")) { console.log("复制成功"); } else { console.log("复制失败"); } // 移除 input 框 document.body.removeChild(input); }); ``` 此代码创建一个输入框,设置其内容,选中输入框内容,监听 `copy` 事件,在事件处理函数中修改剪贴板内容,最后执行复制操作并移除输入框 [^1]。 ### 方法二:监听全局 `copy` 事件 下面代码在全局监听 `copy` 事件,将复制内容中的连续换行替换为单个换行: ```javascript // 在 didmount 生命周期里监听复制事件 window.document.addEventListener("copy", copy); function copy(oEvent) { let copyInfo = ""; // 获取复制信息 try { copyInfo = document.selection.createRange().text; } catch (ex) { copyInfo = window.getSelection().toString(); } let clipboardData = window.clipboardData; // for IE if (!clipboardData) { // for chrome or firefox clipboardData = oEvent.clipboardData; } // 把两行替换成一行 let myReg = /(\n){2,}/g; // 修改剪贴板中的内容 clipboardData.setData('Text', copyInfo.replace(myReg, "\n")); // 必须禁用原 copy 方法才能生效 oEvent.preventDefault(); } ``` 该代码监听全局 `copy` 事件,在事件处理函数中获取复制内容,使用正则表达式替换连续换行,修改剪贴板内容并阻止默认复制行为 [^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值