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>
  • 相关阅读:
    Atitit sql计划任务与查询优化器统计信息模块
    Atitit  数据库的事件机制触发器与定时任务attilax总结
    Atitit 图像处理知识点体系知识图谱 路线图attilax总结 v4 qcb.xlsx
    Atitit 图像处理 深刻理解梯度原理计算.v1 qc8
    Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx
    Atitit Mysql查询优化器 存取类型 范围存取类型 索引存取类型 AND or的分析
    Atitit View事件分发机制
    Atitit 基于sql编程语言的oo面向对象大规模应用解决方案attilax总结
    Atitti 存储引擎支持的国内点与特性attilax总结
    Atitit 深入理解软件的本质 attilax总结 软件三原则"三次原则"是DRY原则和YAGNI原则的折
  • 原文地址:https://www.cnblogs.com/tylerdonet/p/4533782.html
Copyright © 2011-2022 走看看