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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
集体婚礼证婚词
2014/01/13 职场文书
授权委托书
2014/07/31 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
师范生见习自我总结
2015/06/23 职场文书
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python