js实现各种复制到剪贴板的方法(分享)


Posted in Javascript onOctober 27, 2016

一、实现点击按钮,复制文本框中的的内容

<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

以上就是小编为大家带来的js实现各种复制到剪贴板的方法(分享)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
javascript常用函数(1)
Nov 04 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 #Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 #Javascript
vue插件tab选项卡使用小结
Oct 27 #Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 #Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 #Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 #Javascript
微信小程序  modal弹框组件详解
Oct 27 #Javascript
You might like
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
详解React中setState回调函数
2018/06/14 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python字符串,数值计算
2016/10/05 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python中join()方法介绍
2018/10/11 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
python 二维数组90度旋转的方法
2019/01/28 Python
python实现各种插值法(数值分析)
2019/07/30 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
Puma印度官网:德国运动品牌
2019/10/06 全球购物
政府门卫岗位职责
2014/04/29 职场文书
校本课程教学计划
2015/01/19 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
话题作文之学会尊重
2019/12/16 职场文书