代码详解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 第二课 操作包装集元素代码
Mar 14 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
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
Smarty Foreach 使用说明
2010/03/23 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
Python中psutil的介绍与用法
2019/05/02 Python
Python制作词云图代码实例
2019/09/09 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
临床医师专业个人自我评价范文
2013/11/07 职场文书
中学老师的自我评价
2013/11/07 职场文书
市场营销策划方案
2014/06/11 职场文书
2014年度个人工作总结
2014/11/07 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python