JS实现各种复制到剪贴板
一、实现点击按钮,复制文本框中的的内容
|
|
<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"><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){js=obj.createTextRange();js.execCommand("Copy")}</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实现各种复制到剪贴板的更多相关文章
- js 将内容复制到剪贴板
js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...
- js将内容复制到剪贴板
有一需求,点击按钮要将某个值复制到剪贴板. 第一种,代码如下: <div cols="20" id="biao1">12345678</div ...
- JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法
### 之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的. 就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可 ...
- js/jQuery实现复制到剪贴板功能,兼容所有浏览器
因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...
- js实现各种复制到剪贴板的方法
一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=d ...
- js移动端复制到剪贴板
// 复制到剪切板 function copy(str){ var save = function (e){ e.clipboardData.setData('text/plain',str);//c ...
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
随机推荐
- HDU 4509 湫湫系列故事——减肥记II (简单模拟)
题意:一天一共有1440分钟,主人公每天有n件事要做,给出这n件事开始跟结束的时间,然后让你求出,空闲的时间的总分钟数是多少. 解题报告:简单模拟,只要开个一维数组标记那个每个分钟是否是有事的就可以了 ...
- keepalived启动不成功,状态一直是inactive(dead) 的解决办法以及keepalived高版本没有rc.d目录,虚拟VIP无法访问问题
安装配置教程我就不说了,网上很多,这里只给出我遇到的两个坑: 1 rc.d目录 ,kp在1.4版本之后rc.d要去解压之后的源码包里去找,make之后的目录里面没有了,我使用的是2.0.13最新版本, ...
- git使用常用命令
第一部分:个人整理部分(读<Git教程By廖雪峰.pdf>笔记) /* 配置全局参数 */git config --global user.name "username" ...
- Linux Timer定时器【转】
转自:https://www.jianshu.com/p/66b3c75cae81 timerfd为Linux为用户程序提供的定时器接口,该接口基于文件描述符,通过文件描述符的可读事件进行超时通知,且 ...
- LINUX下 USB转串口 【转】
转自:http://blog.163.com/smilexiao_11015461/blog/static/2122052182012102410399459/ 1.将设备u口插入pc2.输入#lsm ...
- 百度编辑器ueditor 字符限制
百度编辑器ueditor 字符限制 默认只能输入10000个字符 修改 ueditor.config.js // ,wordCount:true //是否开启字数统计 // ,maximumWords ...
- Session,Token相关区别
1. 为什么要有session的出现?答:是由于网络中http协议造成的,因为http本身是无状态协议,这样,无法确定你的本次请求和上次请求是不是你发送的.如果要进行类似论坛登陆相关的操作,就实现不了 ...
- 使用jstl方式替换服务器请求地址
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
- zookeeper命令行客户端
前提条件:搭建好zookeeper服务器集群<Zookeeper深入认识>,并且集群成功开启. 执行zkServer.sh,客户端连接上服务器hadoop1. 都有哪些命令行操作呢?(见下 ...
- JAVAEE——SpringBoot日志篇:日志框架SLF4j、日志配置、日志使用、切换日志框架
Spring Boot 日志篇 1.日志框架(故事引入) 小张:开发一个大型系统: 1.System.out.println(""):将关键数据打印在控制台:去掉?写在一个文件 ...