代码详解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 相关文章推荐
浮动的div自适应居中显示的js代码
Dec 23 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 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
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
javascript的内存管理详解
2013/08/07 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
Python简单计算文件夹大小的方法
2015/07/14 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python elasticsearch环境搭建详解
2019/09/02 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
酒店销售经理岗位职责
2014/01/31 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
销售会议开幕词
2015/01/28 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书