Heim >Web-Frontend >js-Tutorial >Klicken Sie auf den mit JS erstellten Kopiereffekt
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:
Beispiel
<!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='story.select();document.execCommand("Copy");'></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('test').value)" >复制</button> </body></html>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 LiniendiagrammWie NodeJS Single Sign-On über JSONP-Demo implementiertDas 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!