Klicken Sie auf den mit JS erstellten Kopiereffekt-js-Tutorial-php.cn

Klicken Sie auf den mit JS erstellten Kopiereffekt

php中世界最好的语言

Freigeben： 2018-03-12 11:37:31

Original

1796 Leute haben es durchsucht

Dieses Mal werde ich Ihnen den Click-to-Copy-Effekt vorstellen, der mit JS erstellt wurde. Was ist beim Click-to-Copy-Effekt, der mit JS erstellt wurde, zu beachten? Das Folgende ist ein praktischer Fall ein Blick.
Prinzip:

Simulieren Sie den Aufruf des Browser-Kopierbefehls durch die Textbereichsdaten im Alles-Auswahl-Formular, um das Kopieren zu implementieren

Beispiel

I Ich glaube, Sie haben diesen Artikel gelesen. Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

<!DOCTYPE html><html><head>
    <meta charset="UTF-8"> 
    <title>复制</title></head><body>
    <script>  
           var textCopy=function (data) {                var f=document.createElement("form");
                f.id="copy-"+Date.parse(new Date());
                f.onsubmit=function(){return false};
                f.style="opacity: 0;height: 1px;width: 1px;overflow: hidden;position:fixed;top: -1;left: -1;z-index: -1;"
                f.innerHTML=`<button onclick=&#39;story.select();document.execCommand("Copy");&#39;></button>
                <textarea name="story">${data}</textarea>`;                document.body.appendChild(f);                document.querySelector(`#${f.id}>button`).click();  
                document.body.removeChild(document.getElementById(f.id));
            } 
    </script>
    <input id="test"  value="" />
    <button onclick="textCopy(document.getElementById(&#39;test&#39;).value)" >复制</button>    </body></html>

Nach dem Login kopieren

Verwandte Lektüre:

So verwenden Sie das http-Modul, um einen Testclient für die Schnittstelle zum Hochladen von Bildern in nodejs zu schreiben

Änderung der H5-Produktionsleistung Liniendiagramm

Wie NodeJS Single Sign-On über JSONP-Demo implementiert

Das obige ist der detaillierte Inhalt vonKlicken Sie auf den mit JS erstellten Kopiereffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!