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 相关文章推荐
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
js对象基础实例分析
Jan 13 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
深入理解javascript中的this
Feb 08 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
浅析Jquery操作select
2016/12/13 Javascript
javascript中的面向对象
2017/03/30 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
urllib2自定义opener详解
2014/02/07 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python异常处理操作实例详解
2018/08/28 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
在校生钳工实习自我鉴定
2013/09/19 职场文书
校园新闻广播稿
2014/01/10 职场文书
毕业生求职信
2014/06/10 职场文书