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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
分享别人写的一个小型js框架
Aug 13 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
JSONP基础知识详解
Mar 19 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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连接Access数据库的方法小结
2013/06/20 PHP
php 常用的系统函数
2017/02/07 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
python文件写入实例分析
2015/04/08 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
python中有帮助函数吗
2020/06/19 Python
基于Python正确读取资源文件
2020/09/14 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
化工专业应届生求职信
2013/11/08 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
入股协议书范本
2014/04/14 职场文书
班级课外活动总结
2014/07/09 职场文书
Echarts如何重新渲染实例详解
2022/05/30 Javascript