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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
这样回答继承可能面试官更满意
Dec 10 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实现将GB编码转换为UTF8
2006/11/25 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
深入分析PHP设计模式
2020/06/15 PHP
PHP 裁剪图片
2021/03/09 PHP
js模仿hover的具体实现代码
2013/12/30 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
js实现简单模态框实例
2018/11/16 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python中的colorlog库使用详解
2019/07/05 Python
Django框架视图函数设计示例
2019/07/29 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
材料工程专业毕业生求职信
2014/03/04 职场文书
工作散漫检讨书
2014/09/16 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript