Heim > Web-Frontend > js-Tutorial > Hauptteil

Mehrere Möglichkeiten zum Implementieren von Kopieraktionen in Javascript (Zusammenfassung)

青灯夜游
Freigeben: 2021-01-15 18:54:44
nach vorne
4068 Leute haben es durchsucht

Dieser Artikel stellt Ihnen verschiedene Möglichkeiten vor, die Kopieraktion in Javascript zu implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Mehrere Möglichkeiten zum Implementieren von Kopieraktionen in Javascript (Zusammenfassung)

Javascript-Implementierung von Kopieraktionen (Kopieren)

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

Prinzip: Die copyUrl2-Funktion wird ausgelöst, wenn auf die Schaltfläche geklickt wird, und Wird gemäß dem ID-Objekt biao1 ausgewählt und kopiert dann den ausgewählten Inhalt gemäß execCommand. Daher muss der ausgewählte Inhalt zu diesem Zeitpunkt sichtbar sein, 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

4

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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("复制成功!");
      }
    }
Nach dem Login kopieren
Weitere Programmierkenntnisse finden Sie unter:

Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonMehrere Möglichkeiten zum Implementieren von Kopieraktionen in Javascript (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:liqingbo.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage