Heim > Artikel > Web-Frontend > So implementieren Sie die Kopierfunktion in JS (Zusammenfassung)

So implementieren Sie die Kopierfunktion in JS (Zusammenfassung)

青灯夜游nach vorne: 2020-12-08 17:50:148962Durchsuche

Dieser Artikel stellt Ihnen einige Methoden zur Implementierung der Kopierfunktion in Javascript vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

So implementieren Sie die Kopierfunktion in Javascript

1. Klicken Sie auf die Schaltfläche, um den Inhalt im Textfeld zu kopieren

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

Prinzip: Wenn auf die Schaltfläche geklickt wird, wird die copyUrl2-Funktion ausgelöst, die Das Objekt wird gemäß der biao1-ID ausgewählt und dann Der ausgewählte Inhalt wird gemäß execCommand kopiert, sodass der ausgewählte Inhalt zu diesem Zeitpunkt sichtbar sein muss, dh es darf kein ausgeblendetes Textfeld sein.

2. Kopieren Sie die Themenadresse und die URL-Adresse und senden Sie sie an Ihre Freunde auf 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 Kopieren Sie die URL direkt

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

5. Kopieren Sie den Textrahmen oder verbergen Sie den Inhalt im Feld

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

6. Kopieren Sie den Inhalt im Span-Tag

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

7. Browserkompatibles copyToClipboard („Inhalt kopieren“)

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

8. Kompatibel mit dem Kopiercode der wichtigsten Browser (kombiniert mit ZeroClipboard. js)

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("复制成功！");
      }
    }

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo! !

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kopierfunktion in JS (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript JS 对象

Stellungnahme：

Dieser Artikel ist reproduziert unter:liqingbo.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verwende ich das NVM-Tool zum Verwalten der Knotenversion? MethodeneinführungNächster Artikel：Wie verwende ich das NVM-Tool zum Verwalten der Knotenversion? Methodeneinführung

In Verbindung stehende Artikel

Mehr sehen