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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
详解Vue之事件处理
Jul 10 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Python二元算术运算常用方法解析
2020/09/15 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
留学自荐信写作方法
2014/01/27 职场文书
保险公司年会主持词
2014/03/22 职场文书
公司任命书范本
2014/06/04 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
Java Socket实现多人聊天系统
2021/07/15 Java/Android