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

  1. <script type="text/javascript">
  2. function copyUrl2()
  3. {
  4. var Url2=document.getElementById("biao1");
  5. Url2.select(); // 选择对象
  6. document.execCommand("Copy"); // 执行浏览器复制命令
  7. alert("已复制好,可贴粘。");
  8. }
  9. </script>
  10. <textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
  11. <input type="button" onClick="copyUrl2()" value="点击复制代码" />

二、复制专题地址和 url 地址,传给 QQ/MSN 上的好友

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>Js复制代码</title>
  6. </head>
  7. <body>
  8. <p>
  9. <input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址,传给QQ/MSN上的好友">
  10. <script language="javascript">
  11. function copyToClipBoard(){
  12. var clipBoardContent="";
  13. clipBoardContent+=document.title;
  14. clipBoardContent+="";
  15. clipBoardContent+=this.location.href;
  16. window.clipboardData.setData("Text",clipBoardContent);
  17. alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友");
  18. }
  19. </script>

 三、直接复制 url

  1. <input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
  2. <script language="javascript">
  3. function copyUrl()
  4. {
  5. var clipBoardContent=this.location.href;
  6. window.clipboardData.setData("Text",clipBoardContent);
  7. alert("复制成功!");
  8. }
  9. </script>

 四、点击文本框时,复制文本框里面的内容

  1. <input onclick="oCopy(this)" value="你好.要copy的内容!">
  2. <script language="javascript">
  3. function oCopy(obj){
  4. obj.select();
  5. js=obj.createTextRange();
  6. js.execCommand("Copy")
  7. alert("复制成功!");
  8. }
  9. </script>

  五、复制文本框或者隐藏域中的内容

  1. <script language="javascript">
  2. function CopyUrl(target){
  3. target.value=myimg.value;
  4. target.select();
  5. js=myimg.createTextRange();
  6. js.execCommand("Copy");
  7. alert("复制成功!");
  8. }
  9. function AddImg(target){
  10. target.value="[IMG]"+myimg.value+"[/ img]";
  11. target.select();
  12. js=target.createTextRange();
  13. js.execCommand("Copy");
  14. alert("复制成功!");
  15. }
  16. </script>

  六、复制 span 标记中的内容

  1. <script type="text/javascript">
  2. </script>
  3. <br />
  4. <br />
  5. <script type="text/javascript">function copyText(obj)
  6. {
  7. var rng = document.body.createTextRange();
  8. rng.moveToElementText(obj);
  9. rng.scrollIntoView();
  10. rng.select();
  11. rng.execCommand("Copy");
  12. rng.collapse(false);
  13. alert("复制成功!");
  14. }
  15. </script>

  七、浏览器兼容  copyToClipboard("拷贝内容")

  1. function copyToClipboard(txt) {
  2. if (window.clipboardData) {
  3. window.clipboardData.clearData();
  4. clipboardData.setData("Text", txt);
  5. alert("复制成功!");
  6.  
  7. } else if (navigator.userAgent.indexOf("Opera") != -1) {
  8. window.location = txt;
  9. } else if (window.netscape) {
  10. try {
  11. netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
  12. } catch (e) {
  13. alert("被浏览器拒绝!\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'");
  14. }
  15. var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
  16. if (!clip)
  17. return;
  18. var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
  19. if (!trans)
  20. return;
  21. trans.addDataFlavor("text/unicode");
  22. var str = new Object();
  23. var len = new Object();
  24. var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
  25. var copytext = txt;
  26. str.data = copytext;
  27. trans.setTransferData("text/unicode", str, copytext.length * 2);
  28. var clipid = Components.interfaces.nsIClipboard;
  29. if (!clip)
  30. return false;
  31. clip.setData(trans, null, clipid.kGlobalClipboard);
  32. alert("复制成功!");
  33. }
  34. }

  八、兼容各大浏览器的复制代码(结合ZeroClipboard.js)

  1. <html>
  2. <head>
  3. <title>Zero Clipboard Test</title>
  4. <script type="text/javascript" src="ZeroClipboard.js"></script>
  5. <script language="JavaScript">
  6. var clip = null;
  7. function $(id) { return document.getElementById(id); }
  8. function init() {
  9. clip = new ZeroClipboard.Client();
  10. clip.setHandCursor(true);
  11. clip.addEventListener('mouseOver', function (client) {
  12. // update the text on mouse over
  13. clip.setText( $('fe_text').value );
  14. });
  15.  
  16. clip.addEventListener('complete', function (client, text) {
  17. //debugstr("Copied text to clipboard: " + text );
  18. alert("该地址已经复制,你可以使用Ctrl+V 粘贴。");
  19. });
  20. clip.glue('clip_button', 'clip_container' );
  21. }
  22. </script>
  23. </head>
  24. <body onLoad="init()">
  25. <input id="fe_text" cols=50 rows=5 value=复制内容文本1 >
  26. <span id="clip_container"><span id="clip_button"><b>复制</b></span></span>
  27. </body>
  28. </html

  

js实现各种复制到剪贴板的方法的更多相关文章

  1. js 将内容复制到剪贴板

      js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...

  2. js将内容复制到剪贴板

    有一需求,点击按钮要将某个值复制到剪贴板. 第一种,代码如下: <div cols="20" id="biao1">12345678</div ...

  3. JQery插件clipboard.js ----将文本复制到剪贴板的现代化方法

    ### 之前用了js自带的剪贴板对象clipboardData 对象以为就可以实现粘贴复制,但是种只支持IE的. 就找了jq的一个插件Zclip,但是网上的说法是利用了flesh来实现的,我用了之后可 ...

  4. clipboard.js -- js实现将文本复制到剪贴板的方法

    资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...

  5. js/jQuery实现复制到剪贴板功能,兼容所有浏览器

    因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...

  6. JS实现各种复制到剪贴板

    一.实现点击按钮,复制文本框中的的内容                         <script type="text/javascript"> function ...

  7. js移动端复制到剪贴板

    // 复制到剪切板 function copy(str){ var save = function (e){ e.clipboardData.setData('text/plain',str);//c ...

  8. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  9. 【原】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

随机推荐

  1. ReactiveX 学习笔记(13)基础类型

    Key Types and Life Management 本文主题是 Rx 中的基础类型 Subject 类及其生命周期的管理. 公共代码 RxNET private static void Wri ...

  2. 使用Node.JS监听文件夹变化

    使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具 当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...

  3. 遍历DOM树,each()遍历

    在<jQuery教程/理解选取更新范围>一节中,我们知道:当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. 然后有的时候需要遍历元素,怎么办? 使用each( ...

  4. 什么是socket?

    1.七层协议简化为四层:应用层.传输层.网络层.链路层:2.套接字是应用层和TCP/IP协议族通信间的软件抽象层,将TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用实现进程在网络中的通信:本地 ...

  5. oracle函数大全-字符处理函

    字符函数——返回字符值 这些函数全都接收的是字符族类型的参数(CHR 除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据库类 ...

  6. C++ MFC 改变控件大小和位置

    用CWnd类的函数MoveWindow()或SetWindowPos()可以改变控件的大小和位置. void MoveWindow(int x,int y,int nWidth,int nHeight ...

  7. mongodb突然出现一些特别奇葩的事

    mongo突然出现一些奇葩的事,如数据都还在,但某个命令敲下去了.啥东西都没有返回给我们. 往往这个时候特别的郁闷,找不出问题所在. 不用太担心,看看版本,多半是mongo的版本太老了,有些命令已经过 ...

  8. 03_java基础(五)之项目结构搭建

    1.结构图 2.dao代码编辑 package com.day01.station.dao; /** * Created by Administrator on 2018/2/1. */ public ...

  9. js中函数的 this、arguments 、caller,call(),apply(),bind()

    在函数内部有两个特殊的对象,arguments 和 this,还有一个函数对象的属性caller. arguments对象 arguments是一个类似数组的对象,包含着传入函数的所有参数. func ...

  10. sqlserver自增主键

    参考 https://www.cnblogs.com/michellexiaoqi/p/8031294.html 1.选中表:         2.右击鼠标,设计:         3.选中列(整数类 ...