Javascript控制剪贴板大全

看到UBB代码[ code ]视窗的时候会有个"复制到剪贴板"的功能.我觉得很好用.
突然想到文件上传后,出现在"地址(路径)"位置的URL,给他加个复制的按钮吧.
研究了一下原来的代码..
定义函数

程序代码
view plaincopy to clipboardprint?
  1. function CopyText(obj) {   
  2.  ie = (document.all)? true:false  
  3.  if (ie){   
  4.   var rng = document.body.createTextRange(); //列出所有文本对象内容   
  5.   rng.moveToElementText(obj);//移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本   
  6.   rng.scrollIntoView();//scrollIntoView 将对象滚动到可见范围内，将其排列到   
  7. 窗口顶部或底部   
  8.   rng.select();//选择   
  9.   rng.execCommand("Copy");//复制   
  10.   rng.collapse(false);//不太明白..   
  11.  }   
  12. }   

然后用

程序代码
<a href="javascript:CopyText(document.all.CODE_8223);">[ 复制代码到剪贴板 ]</a> </td></tr></table><div class="code_main" id="CODE_8223">需要复制的代码...</div>

它主要是选中要复制的文本对象,然后用exeCommand("Copy")来复制.
之后我照班了一个..结果发现<input type=text>里面的东西无法复制..只能选中外面的框..
又在网上找了一些资料...终于有了答案.嘿嘿..
==========================================
javascript Tip(1) 操作剪贴板
javascript可以轻松操作客户端剪贴板内容，不过只适用IE5以上浏览器
javascript可以使用window.clipboardData对象处理剪贴板内容
保存到剪贴板的方法 setData(param1, param2)
param1 :数据类型 text 或 URL等.
param2 :数据内容

从剪贴板读出数据的方法 getdata(param1)
清空数据的方法 clearData(param1)

下面是一个例子演示

程序代码
view plaincopy to clipboardprint?
  1.   
  2. <HTML>    
  3. <HEAD>    
  4. <TITLE>测试操作剪贴板</TITLE>    
  5. </HEAD>    
  6. <script>    
  7. function copyToClipboard()    
  8. {    
  9. var d=document.all("source").value;    
  10. window.clipboardData.setData('text', d);    
  11. }    
  12.   
  13. </script>    
  14. <BODY >    
  15.   
  16. <button onclick="copyToClipboard();">拷贝</button>    
  17. <input type="text" size=20 id="source" value="测试数据">    
  18. <br>    
  19. <button onclick="alert(window.clipboardData.getData('text'));">显示</button>    
  20. <button onclick="window.clipboardData.clearData('text');">清空</button>    
  21.   
  22.   
  23. </BODY>    
  24. </HTML>    
  25.   

下面是另一个例子实现页面中选中字符，并拖拉到文本区功能
注意其中的window.event.dataTransfer对象也可处理剪贴板内容，不过只能用在 drag-and-drop 操作中


程序代码
view plaincopy to clipboardprint?
  1. <HTML>    
  2. <HEAD>    
  3. <TITLE>测试操作剪贴板2</TITLE>    
  4. </HEAD>    
  5. <script>    
  6.   
  7. function transferDrop() {    
  8. windowwindow.event.srcElement.innerText = window.event.dataTransfer.getData("text");    
  9. window.event.returnValue = false;    
  10. }    
  11. function transferDrag() {    
  12. window.event.dataTransfer.dropEffect = 'move';    
  13. window.event.returnValue = false;    
  14. }    
  15.   
  16. </script>    
  17. <BODY    
  18.   
  19. <p id="mySource" ondragstart="window.event.dataTransfer.effectAllowed =    
  20. 'move';">选择我们并把我们拖到下面的textarea</p>    
  21.   
  22. <textarea id="myTarget" ondrop="transferDrop();"    
  23. ondragover="window.event.returnValue = false;" ondragenter="transferDrag();">    
  24. </textarea>    
  25.   
  26. </BODY>    
  27. </HTML>    

==============================
发现用
window.clipboardData.setData("text",value)
window.clipboardData.getData("text")
window.clipboardData.clearData("text")
很容易控制剪贴板的内容了..
posted @ 2008-05-10 14:53  PointNet  阅读(5764)  评论(2)  编辑  收藏  举报