Home >Web Front-end >JS Tutorial >Several ways to implement copy actions in Javascript (summary)

Several ways to implement copy actions in Javascript (summary)

青灯夜游forward: 2021-01-15 18:54:444101browse

This article will introduce to you several ways to implement copy (Copy) actions in Javascript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Javascript implementation of copy (Copy) actions

1. Implement click button, Copy the content in the text box

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

Principle: When the button is clicked, the copyUrl2 function is triggered, the object is selected according to biao1 ID, and then the selected content is copied according to execCommand, so the selected content must be visible at this time. In other words, it cannot be a hidden text field.

2. Copy the topic address and url address and send them to friends on 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=&#39;copyToClipBoard()&#39; 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>

3. Copy the url directly

<input type="button" name="anniu2" onClick=&#39;copyUrl()&#39; value="复制URL地址">
 
<script language="javascript">
function copyUrl(){
    var clipBoardContent=this.location.href;
    window.clipboardData.setData("Text",clipBoardContent);
    alert("复制成功!");
}
</script>

4. When clicking the text box, copy The content in the text box

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

5. Copy the content in the text box or hidden field

<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>

6. Copy the content in the span tag

<script type="text/javascript"></script>
<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>

7. Browser compatibility copyToClipboard("Copy content")

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请在浏览器地址栏输入&#39;about:config&#39;并回车\n然后将 &#39;signed.applets.codebase_principal_support&#39;设置为&#39;true&#39;");
        }
        var clip = Components.classes[&#39;@mozilla.org/widget/clipboard;1&#39;].createInstance(Components.interfaces.nsIClipboard);
        if (!clip)
          return;
        var trans = Components.classes[&#39;@mozilla.org/widget/transferable;1&#39;].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("复制成功！");
      }
    }

8. Copy code compatible with major browsers (combined with 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(&#39;mouseOver&#39;, function (client) {
  // update the text on mouse over
  clip.setText( $(&#39;fe_text&#39;).value );
     });
       
     clip.addEventListener(&#39;complete&#39;, function (client, text) {
  //debugstr("Copied text to clipboard: " + text );
  alert("该地址已经复制，你可以使用Ctrl+V 粘贴。");
     });
     clip.glue(&#39;clip_button&#39;, &#39;clip_container&#39; );
 }
</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>

For more programming-related knowledge, please visit: Programming getting Started! !

The above is the detailed content of Several ways to implement copy actions in Javascript (summary). For more information, please follow other related articles on the PHP Chinese website!

JavaScript copy JS 对象

Statement：

This article is reproduced at:liqingbo.cn. If there is any infringement, please contact admin@php.cn delete

Previous article：Learn more about callback functions in JavaScriptNext article：Learn more about callback functions in JavaScript

See more

Several ways to implement copy actions in Javascript (summary)

Related articles