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 相关文章推荐
json数据与字符串的相互转化示例
Sep 18 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 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实现求解最长公共子串问题的方法
2017/11/17 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
原生JS实现萤火虫效果
2020/03/07 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python excel转换csv代码实例
2019/08/26 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
讲座新闻稿
2015/07/18 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript