Javascript 实现复制(Copy)动作方法大全


Posted in Javascript onJune 20, 2014

一、实现点击按钮,复制文本框中的的内容

<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />

二、复制专题地址和 url 地址,传给 QQ/MSN 上的好友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js复制代码</title>
</head>
<body>
<p>
<input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址,传给QQ/MSN上的好友">
<script language="javascript">
function copyToClipBoard(){
var clipBoardContent="";
clipBoardContent+=document.title;
clipBoardContent+="";
clipBoardContent+=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友");
}
</script>

三、直接复制 url

<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
<script language="javascript">
function copyUrl()
{
var clipBoardContent=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功!");
}
</script>

四、点击文本框时,复制文本框里面的内容

<input onclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
function oCopy(obj){
obj.select();
js=obj.createTextRange();
js.execCommand("Copy")
alert("复制成功!");
}
</script>

五、复制文本框或者隐藏域中的内容

<script language="javascript">
function CopyUrl(target){
target.value=myimg.value;
target.select(); 
js=myimg.createTextRange(); 
js.execCommand("Copy");
alert("复制成功!");
}
function AddImg(target){
target.value="[IMG]"+myimg.value+"[/ img]";
target.select();
js=target.createTextRange(); 
js.execCommand("Copy");
alert("复制成功!");
}
</script>

六、复制 span 标记中的内容

<script type="text/javascript">
</script>
<br />
<br />
<script type="text/javascript">function copyText(obj) 
{
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
alert("复制成功!");
}
</script>

七、浏览器兼容  copyToClipboard("拷贝内容")

function copyToClipboard(txt) {
      if (window.clipboardData) {
        window.clipboardData.clearData();
        clipboardData.setData("Text", txt);
        alert("复制成功!");
 
      } else if (navigator.userAgent.indexOf("Opera") != -1) {
        window.location = txt;
      } else if (window.netscape) {
        try {
          netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        } catch (e) {
          alert("被浏览器拒绝!\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'");
        }
        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
        if (!clip)
          return;
        var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
        if (!trans)
          return;
        trans.addDataFlavor("text/unicode");
        var str = new Object();
        var len = new Object();
        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
        var copytext = txt;
        str.data = copytext;
        trans.setTransferData("text/unicode", str, copytext.length * 2);
        var clipid = Components.interfaces.nsIClipboard;
        if (!clip)
          return false;
        clip.setData(trans, null, clipid.kGlobalClipboard);
        alert("复制成功!");
      }
    }

八、兼容各大浏览器的复制代码(结合ZeroClipboard.js)

<html>
<head>
<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
 var clip = 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('clip_button', 'clip_container' );
 }
</script>
</head>
<body onLoad="init()">
<input id="fe_text" cols=50 rows=5 value=复制内容文本1 >
<span id="clip_container"><span id="clip_button"><b>复制</b></span></span>
</body>
</html>
Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
用js实现预览待上传的本地图片
Mar 15 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 #Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 #Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 #Javascript
Node.js实现简单聊天服务器
Jun 20 #Javascript
SuperSlide2实现图片滚动特效
Jun 20 #Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 #Javascript
js常用数组操作方法简明总结
Jun 20 #Javascript
You might like
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
js初始化验证实例详解
2016/11/26 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
传媒专业推荐信范文
2013/11/23 职场文书
挂职思想汇报
2013/12/31 职场文书
满月酒答谢词
2014/01/14 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
Java 在线考试云平台的实现
2021/11/23 Java/Android
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
JavaScript实例 ODO List分析
2022/01/22 Javascript