zoukankan      html  css  js  c++  java
  • js实现复制功能

    JS 点击复制Copy

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

    复制代码
     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="点击复制代码" />
    复制代码

    2.复制专题地址和 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>
    复制代码

    3.直接复制 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>
    复制代码

    4.点击文本框时,复制文本框里面的内容

    复制代码
    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>
    复制代码

    5.复制文本框或者隐藏域中的内容

    复制代码
     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>
    复制代码

    6.复制 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>
    复制代码

     7.浏览器兼容  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("被浏览器拒绝!
    请在浏览器地址栏输入'about:config'并回车
    然后将 '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         }
    复制代码

    js实现但击自动选中文本

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>自动选择文本框/编辑框中的文字</title>
    <script type="text/javascript">
    function Myselect_txt(){
      if (document.form1.title.focus){
        document.form1.title.select();}
    }
    function Myselect_txtarea(){
      if (document.form1.content.focus){
        document.form1.content.select();}
    }
    </script>
    </head>
    <body style="font-size:12px">
    <table width="443" height="97" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f9f9f9">
      <form name="form1">
        <tr bgcolor="#214994">
          <td height="25" colspan="2"><div align="center"><font color="#FFFFFF">新闻信息修改</font></div></td>
        </tr>
        <tr>
          <td width="80" height="28"><div align="right"><font color="#214994">新闻标题:</font></div></td>
          <td width="363"><input name="title" type="text" size="50" value="今日新闻头条" onClick="Myselect_txt()"></td>
        </tr>
        <tr>
          <td height="20"><div align="right"><font color="#214994">新闻内容:</font></div></td>
          <td rowspan="2"><textarea name="content" cols="50" rows="6" onClick="Myselect_txtarea()">今日,据相关方面报道,...</textarea></td>
        </tr>
        <tr>
          <td height="10">&nbsp;</td>
        </tr>
        <tr>
          <td height="32" colspan="2">
            <div align="center">
              <input name="add" type="submit" id="add" value="添加">
    &nbsp;
              <input name="Submit" type="reset" value="重置">
          </div></td>
        </tr>
      </form>
    </table>
    </body>
    </html>
  • 相关阅读:
    jquery:class选择器(父子关系)
    jquery:跳转网页
    jquery:获得当前点击对象 : $(this)
    jquery:向后台提交数组
    03 适配器 代理 外观 装饰者
    02 工厂模式
    01 单例模式 Singleton
    设计模式概论与原则 & UML类图
    06 JDBC & ORM
    05 注解与反射 & JVM
  • 原文地址:https://www.cnblogs.com/tylerdonet/p/4533782.html
Copyright © 2011-2022 走看看