`
kenshinlk
  • 浏览: 118323 次
  • 性别: Icon_minigender_1
  • 来自: 广东.佛山.南海
社区版块
存档分类
最新评论

JS操作剪贴板

阅读更多
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>
分享到:
评论
2 楼 softor 2012-10-11  
刚测试了一下,博主的第一种复制到剪贴板的方法在Chrome下不好使~
1 楼 sonicluo3 2009-04-23  
刚测试了一下,博主的第一种复制到剪贴板的方法只适用于IE

相关推荐

    JavaScript操作剪贴板

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

    js 实现 Javascript操作剪贴板

    js 实现 Javascript操作剪贴板! 值得下载看看!资源免费,大家分享!!

    js实现剪贴板操作

    在JavaScript的世界里,剪贴板操作是一个常见的需求,特别是在网页交互和富文本编辑器中。本文将深入探讨如何使用jQuery-zclip框架实现这一功能,并详细解释相关知识点。 **jQuery-zclip框架** jQuery-zclip是一个...

    jQuery获取剪贴板内容的方法

    在当今Web开发中,操作剪贴板功能是用户日常交互的一个重要方面。尽管如此,直接在网页中访问剪贴板是受到限制的,因为出于安全考虑,浏览器默认不允许脚本直接读取剪贴板数据。然而,某些场景下,例如在线文本编辑...

    javascript实现剪贴板复制粘贴

    网络上搜集的javascript对剪贴板的操作,兼容IE与FireFox

    javascript 的execCommand和操作剪贴板

    javascript 的execCommand和操作剪贴板的收集

    js复制链接到剪贴板

    出于安全考虑,浏览器限制了脚本直接操作剪贴板的能力,以防止恶意代码窃取用户数据。但在现代浏览器中,HTML5引入了一种新的API,即`Clipboard API`,它允许在用户授权的情况下进行复制和粘贴操作。 要实现“js...

    代码详解JS操作剪贴板

    javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器。 javascript可以使用window.clipboardData对象处理剪贴板内容...测试操作剪贴板&lt;/TITLE&gt; &lt;/HEAD&gt; [removed] function copyToClipboar

    js 复制到剪贴板 ,兼容支持火狐firefox 和 ie

    标题 "js 复制到剪贴板 ,兼容支持火狐firefox 和 ie" 涉及的是JavaScript编程中实现文本复制到系统剪贴板的功能,并且这个功能需要在Firefox和IE浏览器上都能正常工作。在Web开发中,允许用户将特定内容复制到剪贴板...

    js剪贴板插件clipboard.js

    为了满足这一需求,JavaScript库如clipboard.js应运而生,它为开发者提供了一种简单、优雅的方式来实现剪贴板操作。下面,我们将详细探讨clipboard.js的核心概念、使用方法以及其在实际项目中的应用。 首先,我们...

    剪贴板代码

    对于Web开发,JavaScript提供了`navigator.clipboard`接口来操作剪贴板,但需要注意的是,由于隐私和安全原因,这个接口通常需要用户交互(如点击事件)触发。以下是一个简单的例子: ```javascript async function...

    剪贴板简单学习

    压缩包中的"clipboard_study"可能包含了一些剪贴板相关的代码示例或教程,通过学习这些材料,你可以了解如何在不同编程语言中操作剪贴板,提升你的编程技能。 总之,剪贴板是计算机操作中的一个基础但至关重要的...

    jquery 一键复制指定内容到剪贴板

    由于浏览器的安全策略,直接操作剪贴板在某些情况下可能受限,但通过这些库可以规避这些问题。 要实现这个功能,我们需要以下步骤: 1. **引入jQuery和clipboard库**:在HTML文件中,添加jQuery库(如果尚未包含)...

    实现复制到剪贴板功能

    Zclip的工作原理是利用Flash技术,因为在早期的浏览器中,JavaScript直接操作剪贴板的能力受到限制,而Flash插件可以绕过这些限制。Zclip内部封装了与Flash的交互过程,开发者只需要简单调用API就能完成复制操作。 ...

    js复制到剪贴板

    在JavaScript(JS)中,复制文本到剪贴板的功能是一个常见的需求,特别是在用户交互和数据共享方面。要实现这一功能,我们需要了解JavaScript的剪贴板API。在过去,开发者通常使用`document.execCommand()`来实现...

    JS实现获取剪贴板内容的方法

    在JavaScript中,我们通常通过`clipboardData`对象来操作剪贴板。本文将深入探讨如何使用JS获取剪贴板的内容。 首先,`clipboardData`对象是`event`对象的一个属性,通常在事件处理函数中使用,如`copy`、`cut`或`...

    ZeroClipboard-JS实现复制到剪贴板功能

    由于浏览器出于安全考虑,不允许JavaScript直接操作剪贴板,因此ZeroClipboard采用了一个巧妙的方法:创建一个透明的Flash对象覆盖在需要复制的文本上方。当用户点击这个透明层时,实际上是触发了Flash对象,Flash...

    js剪贴板功能,可以实现复制粘贴

    JavaScript(简称JS)是网页开发中的重要脚本语言,它提供了与用户交互的强大能力,其中包括对剪贴板的操作。在Web应用中,复制和粘贴功能是常见的用户交互需求,而JS剪贴板功能就是用来满足这一需求的关键技术。...

    js实现的复制内容到剪贴板

    由于涉及到用户的隐私,JavaScript直接操作剪贴板的API在过去是受限的。但是,随着Web API的发展,现代浏览器已经提供了安全的剪贴板接口——`Clipboard API`。 1. **Clipboard API介绍** Clipboard API 是一个...

Global site tag (gtag.js) - Google Analytics