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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
laypage分页控件使用实例详解
May 19 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
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
session在PHP大型web应用中的使用
2011/06/25 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
python 读写文件,按行修改文件的方法
2018/07/12 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Django的CVB实例详解
2020/02/10 Python
Python: glob匹配文件的操作
2020/12/11 Python
Django视图类型总结
2021/02/17 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
罗技美国官网:Logitech美国
2020/01/22 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
Java语言程序设计测试题改错题部分
2014/07/22 面试题
计算机操作自荐信
2013/12/07 职场文书
门卫人员岗位职责
2013/12/24 职场文书
《画家乡》教学反思
2014/04/22 职场文书
应用外语系自荐信
2014/06/26 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
《假如》教学反思
2016/02/17 职场文书
导游词之青岛崂山
2019/12/27 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android