代码详解JS操作剪贴板


Posted in Javascript onFebruary 11, 2018

javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器。

javascript可以使用window.clipboardData对象处理剪贴板内容。

保存到剪贴板的方法setData(param1, param2)。

param1 :数据类型 text 或 URL等。

param2 :数据内容。

从剪贴板读出数据的方法 getdata(param1)

清空数据的方法 clearData(param1)

<HTML>  
<HEAD>  
<TITLE>测试操作剪贴板</TITLE>  
</HEAD>  
<script>  
function copyToClipboard()  
{  
 var d=document.all("source").value;  
 window.clipboardData.setData('text',d);  
}  
</script>  
<BODY>  
<button onclick="copyToClipboard();">拷贝</button>  
<input type="text" size=20 id="source" value="测试数据">  
<br>  
<button onclick="alert(window.clipboardData.getData('text'));">显示</button>  
<button onclick="window.clipboardData.clearData('text');">清空</button>  
</BODY>  
</HTML>  

下面是另一个例子实现页面中选中字符,并拖拉到文本区功能。注意其中的window.event.dataTransfer对象也可处理剪贴板内容,不过只能用在 drag-and-drop 操作中。
<HTML>  
<HEAD>  
<TITLE>测试操作剪贴板2</TITLE>  
</HEAD>  
<script>  
function transferDrop() {  
   window.event.srcElement.innerText = window.event.dataTransfer.getData("text");  
   window.event.returnValue = false;  
}  
function transferDrag() {  
 window.event.dataTransfer.dropEffect = 'move';  
 window.event.returnValue = false;  
}  
</script>  

<BODY>
<p id="mySource" ondragstart="window.event.dataTransfer.effectAllowed = 'move';">选择我们并把我们拖到下面的textarea</p>  
<textarea id="myTarget" ondrop="transferDrop();" ondragover="window.event.returnValue = false;" ondragenter="transferDrag();">  
</textarea>
</BODY>  
</HTML>
Javascript 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
vue-router项目实战总结篇
Feb 11 #Javascript
vue项目实战总结篇
Feb 11 #Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 #Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 #Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 #Javascript
Vue实现点击后文字变色切换方法
Feb 11 #Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 #Javascript
You might like
PHP4引用文件语句的对比
2006/10/09 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP安全上传图片的方法
2015/03/21 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
python装饰器实例大详解
2017/10/25 Python
python 对象和json互相转换方法
2018/03/22 Python
python随机取list中的元素方法
2018/04/08 Python
python版本五子棋的实现代码
2018/12/11 Python
python实现大文本文件分割
2019/07/22 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
面试后的英文感谢信
2014/02/01 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
平遥古城导游词
2015/02/03 职场文书
节约用电通知
2015/04/25 职场文书
三八妇女节主持词
2015/07/04 职场文书
建议书的格式及范文
2015/09/14 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS