代码详解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 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
js href的用法
May 13 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
Angular 数据请求的实现方法
May 07 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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
短波问题解答
2021/02/28 无线电
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
基于jquery的表格排序
2010/09/11 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
python实现机器学习之多元线性回归
2018/09/06 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
专科毕业生求职简历的自我评价
2013/10/12 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
保护环境倡议书范文
2014/05/13 职场文书
司法建议书范文
2014/05/13 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
三峡人家导游词
2015/01/31 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript