网页怎么实现文本框内容复制到剪贴板

最新推荐文章于 2024-10-21 09:14:25 发布

原创最新推荐文章于 2024-10-21 09:14:25 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flash #safari #浏览器 #chrome #function

本文介绍了如何在Flash 10更新后，通过ZeroClipboard.js组件实现网页文本框内容复制到剪贴板，兼容IE、Firefox、Chrome和Safari等所有浏览器。详细讲解了原理和相关代码示例，并提醒了在使用时需要注意的事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间，老板要求做一个网页实现文本框内容复制到剪贴板的功能，我找了些实现这个功能的技术资料，都只支持IE和Firefo（火狐），这是因为flash 10更新后，网页文本框内容复制到剪贴板兼容所有浏览器的代码一时间在网络中消失，大多都只支持兼容IE和火狐，谷歌Chrome，苹果Safari等正规浏览器几乎都不支持，可以说是没办法支持了，原来用flash传值复制到系统剪贴板的代码因为flash 10的更新，变的毫无用处，在网络上找也根本都不到相关代码，难到说网页就没有办法实现这个文本框内容复制到剪贴板的功能的兼容所有浏览器的代码了吗？答案当然是否的。要实现网页文本框内容复制到剪贴板功能代码兼容所有浏览器，我们就必须要明白为什么flash 10更新后原来的代码不能用的原因，那样就知道了网页怎么实现文本框内容复制到剪贴板，兼容IE、火狐Firefox、谷歌Chrome、苹果Safari所有浏览器。

那么为什么Flash 10更新后，原来使用flash实现网页文本框复制到剪贴板兼容所有浏览器的代码为什么不能用了呢？难道说flash 10更新后，flash就不再支持内容复制到剪贴板了吗？不是的，笔者在网上找了些资料后，发现原来falsh 10更新后要实现内容复制到剪贴板必须要在flash上有一个点击事件，才会触发复制，不能像以前那个只是调用一个参数了。既然知道了事情做起来就简单了，理论就是在点击的那个按钮上面浮动一个透明的flash，点鼠标点击的时候其实就是点击那个透明的flasn。然后把内容复制到剪贴板。

既然理论以经出来了，那么就可以照着做了，因为自己写这个代码有点花时间，我就网上找了一下，找到了一个叫zeroclipboard的组件，它的原理就是网页实现文本框内容复制到剪贴板，我下载后打开看研究了一下，总算弄明白了，下面就是相关代码：

<html>
<head>
<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
  var clip = null;
  var clip2=null;

  function $(id) { return document.getElementById(id); }

  function init() {
   clip = new ZeroClipboard.Client();
   clip.setHandCursor( true );

   clip.addEventListener('mouseOver', function (client) {
    // update the text on mouse over
    clip.setText( $('fe_text').value );//括号里是复制的内容，也可以手动添加
   });

   clip.addEventListener('complete', function (client, text) {
    //debugstr("Copied text to clipboard: " + text );
    alert("文本以经复制，你要以使用Ctrl+V 粘贴。");//复制后的事件
   });
   clip.glue( 'd_clip_button', 'd_clip_container' );//加载事件，
  }
</script>
</head>
<body onLoad="init()">

<textarea id="fe_text" cols=50 rows=5 onChange="clip.setText(this.value)">复制内容文本1</textarea>
<div id="d_clip_container" style="position:relative">
<div id="d_clip_button" style="width:200px;"><b>复制内容1</b></div>
</div><br>
<br>
</body>
</html>

使用代码时要注意，必须要把代码放在测试目录，也就是不能以文件的形式访问的，要以http的形式，意思就是要用IP或是域名访问，就如http://www.cnwebskill.com这样，不能以file://这个样子，flash会出错的，没权限。

eroClipboard.js文件里moviePath属性是falsh的地址，就是目录下的那个ZeroClipboard.swf存放的地址位置。
ZeroClipboard这个类库其实还是不错的，具体的例子文件，我以经打包，大家可以点击“网页怎么实现文本框内容复制到剪贴板，兼容IE、火狐Firefox、谷歌Chrome、苹果Safari所有浏览器”下载，当然你们也可以在百度或谷歌中输入相关关键字搜索这个类库和相关例子。