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

最新推荐文章于 2023-12-11 15:52:38 发布
最新推荐文章于 2023-12-11 15:52:38 发布
阅读量1.2w 收藏
点赞数
分类专栏： web 调试经历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fantasyagain/article/details/42967261
版权
<!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" οnclick="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>
fantasyagain
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
剪贴板操作 Clipboard API 教程
liuhao9999的博客
08-02 1494
简介 浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。 一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如“一键复制”功能，用户点击一下按钮，指定的内容就自动进入剪贴板。 目前，一共有三种方法可以实现剪贴板操作。 Document.execCommand()方法 异步的 Clipboard API copy事件和paste事件 本文逐一介绍这三种方法。 Document.execCommand() 方法 Document.exec
c语言Clipboard函数,剪贴板操作 Clipboard API 教程
weixin_36146690的博客
05-21 1301
一、简介浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如"一键复制"功能，用户点击一下按钮，指定的内容就自动进入剪贴板。目前，一共有三种方法可以实现剪贴板操作。Document.execCommand()方法异步的 Clipboard APIcopy事件和paste事件本文逐...
Drop Api ClipboardEvent 和 DataTransfer
最新发布
aXin_li的博客
12-11 172
在一个拖拽操作*中，*每一个 drag event 都有一个dataTransfer 属性，它包含一个存有拖拽数据的 list ，其中每一项都是一个 DataTransferItem。此方法不会从拖动操作中删除文件，因此如果有任何文件包含在对象的 DataTransfer.types 列表中，仍然可能有一个类型为“Files”的条目在拖动。** DataTransferItemList ** 只有一个属性 ** length** ， 表示列表中拖动项的数量。包含数据传输中可用的所有本地文件的列表。
多浏览器兼容性比较好的复制到剪贴板的js代码
12-09
对于非ie浏览器他是用flash来实现的，js代码如下： 代码如下: [removed] function copy_code(copyText) { if (window.clipboardData) { window.clipboardData.setData(“Text”, copyText) } else { var flashcopier = ‘flashcopier’; if(!document.getElementById(flashcopier)) { var divholder = document.createElement(‘
Javascript操作剪切板数据（支持IE、Chrome、360、搜狗），亲测！
weixin_30430169的博客
10-16 161
clipboarddata只能在IE浏览器中使用，在chrome下会提示对象未定义！以下的方法支持IE、Chrome、360、搜狗等浏览器，其它浏览器还未验证。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C...
前端操作复制粘贴板(clicpboardData )
u012028371的博客
08-25 6959
有时候我们经常会碰到这些场景：玩掘金、知乎的时候复制一段文字，总是会在内容后面加上一些版权信息，以及像小说网站等都有禁止选中，禁止复制这种功能，还有点击自动复制账号的功能。 我也经常遇到这些场景，有时候会去想这后面到底是怎么做，周末趁着有空去研究了一下，然后发现这些都跟操作剪贴板有关系，并且都不难，了解一下基本都知道怎么做了，整理分享一波给大家。 目录 API介绍 实现类知乎/...
js 剪切板的用法(clipboardData.setData)与js match函数介绍
12-01
经常看到这样一种效果：就是单击一个按钮，就将某个区域内的内容，复制到了剪切板中。其实这个功能实现起来也不难，核心就是用到了window子对象clipboardData的一个方法：setData()语法：    clipboardData.setData(sDataFormat, sData) 参数：sDataFormat：要复制的内容的格式；sData：要复制的内容。 返回值：复制成功返回true；失败返回false。 代码如下:[removed]function jianqie(id){var id;var text=document.all(id)
HTML5实战与剖析之剪贴板事件
热门推荐
梦龙小站
02-14 9万+
很多网站当复制粘贴的时候，都会出现有关剪贴板的相关提示，在刚刚入行前端工程师的时候，我还在一直纳闷，这是怎么实现的呢。如今，咱们再也不用纳闷了，因为已经有浏览器把剪贴板相关事件纳入标准了。
js 获取剪贴板文件和文本（解决js获取剪贴板文件总是为空）
Don't lost way
05-19 2216
// ctrl + v自然会触发paste事件，根本不用你自己去监听ctrl+v document.addEventListener('paste',function(event){ //ClipboardEvent // 获取文件 console.dir(event.clipboardData.files); // 获取文本 console.dir(event.clipboardData.getData('text')); }); 获取剪贴板文件时有两个坑： 坑1： c...
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
07-14 1416
在使用wangEditor富文本编辑器时，当从word文档或者其他网页复制文本内容粘贴到编辑器中，如果不过滤掉复制文本中自带的样式，会导致复制的内容比较错乱，甚至无法添加到数据库中。为了解决这个问题，我们需要对从word中粘贴的内容进行处理，把多余的代码剔除，让粘贴后的文本变得更加简洁和轻量。
JavaScript 技术篇-chrome利用ClipboardEvent写入剪切板，chrome写入剪切板不成功解决方法
小蓝枣的博客
07-09 5616
JavaScript 技术篇-chrome利用ClipboardEvent写入剪切板，chrome写入剪切板不成功解决方法。 开始用 ClipboardEvent 怎么也不成功，后来仔细阅读开发文档才发现，需要通过 document.execCommand() 来执行 copy、paste 和 cut 命令，进而触发 ClipboardEvent 事件，才成功的。 我的 el 是绑定的某个 dom 节点，你可以直接替换为 document 也可以。
浏览器剪切板事件的学习（copy，cut，paste）
【有梦想的菜】的博客
03-16 1174
粘贴文章所有内容用户剪切板要添加属于自己附加的内容到用户的剪切板
js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）
11-24
在网站框架搭建过程，有一个功能需要实现复制文本到剪贴板，相信这个功能很常用，但是对于不常写JS代码的我来说是一个比较大的挑战，回想以前做过的一个站点，使用window.clipboardData实现复制到剪贴板功能，...
一段多浏览器的复制到剪贴板javascript代码
12-03
代码如下，就不多说废话了，可以兼容基本上所有的主流浏览器(IE,FF)，很多地方可以用到的： copyToClipboard = function(txt) { if(window.clipboardData) { window.clipboardData.clearData(); window....
pc端和移动端复制粘贴问题
weixin_47599108的博客
04-20 1376
div ref="textarea" class="textarea" id="textarea" contenteditable="true" placeholder="随便说说" @focus="removeDefaultContent" @blur="addDefaultContent" @input="changeAnswerContent" @paste="optimizePasteEvent">/*系统默认菜单被禁用*//*webkit浏览器*/-moz-user-select:none;
JS实现图片粘贴到前台界面
laizhixue的博客
01-10 969
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片粘贴&lt;/title&gt; &lt;style&gt; #img{ width:
剪贴板操作-复制图片
qq_40536213的博客
09-12 406
MIME（Multipurpose Internet Mail Extensions）类型是一种标识文档和文件类型的标准方法。它是一种字符串标识符，用于指示文件的内容类型和格式。
clipboardData.setData与js常用复制到剪贴板脚本
weixin_30610755的博客
03-04 200
利用clipboardData.setData访问剪切板属性，只IE支持此方法，所以先写一段浏览器判断，针对IE使用剪切板脚本，非IE提示手动复制js: 1 <script type="text/javascript"> 2 //留用判断浏览器 3 // var Sys = {}; 4 // var ua = navigator.userAgent.to...
document.getElementById("myText").addEventListener("paste", function(e) { e.preventDefault(); // 禁止默认粘贴行为 var text = e.clipboardData.getData("text/plain"); // 获取粘贴的文本内容 document.execCommand("insertHTML", false, text); // 插入文本内容 });测试有什么方法可执行粘贴
06-03
2. 通过浏览器菜单执行粘贴：在文本框中单击鼠标右键，查看是否能够使用浏览器菜单中的“粘贴”选项进行粘贴。 3. 通过 JavaScript 脚本执行粘贴：在控制台中输入以下代码，模拟粘贴操作： ```javascript var ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值