Javascript控制剪贴板大全

最新推荐文章于 2026-03-12 04:18:05 发布

原创最新推荐文章于 2026-03-12 04:18:05 发布 · 976 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页上文本复制功能的方法。通过创建文本范围、选择并复制文本对象内容，解决了不同浏览器间的兼容性问题。此外，还提供了一个针对<input type=text>元素的具体解决方案。

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

程序代码

   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>里面的东西无法复制..只能选中外面的框..
又在网上找了一些资料...终于有了答案.嘿嘿..

下面是一个例子演示

#
# <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>