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>  

原帖地址:http://blog.163.com/endno_go/blog/static/164059057201061325040517
目录
相关文章
|
29天前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
2月前
|
JavaScript 数据处理
JS 取整,取余操作
JS 取整,取余操作
|
3月前
|
前端开发 JavaScript Java
【面试题】说说 JavaScript数组常见的操作 (20个)
【面试题】说说 JavaScript数组常见的操作 (20个)
|
3月前
|
存储 JavaScript
JS中数组的操作
JS中数组的操作
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
55 1
|
4月前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
42 1
|
4天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
10 0
|
4天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
10 4