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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
JSON stringify方法原理及实例解析
Oct 23 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
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
js实现分页功能
2017/05/24 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
Vue SPA 首屏优化方案
2021/02/26 Vue.js
python动态监控日志内容的示例
2014/02/16 Python
python3访问sina首页中文的处理方法
2014/02/24 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
python要安装在哪个盘
2020/06/15 Python
python 实现Harris角点检测算法
2020/12/11 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
老同学聚会感言
2014/02/23 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
学校安全防火方案
2014/06/07 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2014年文秘工作总结
2014/11/25 职场文书
高中历史教学反思
2016/02/19 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Python如何配置环境变量详解
2021/05/18 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers