将h1元素的内容复制到剪贴板？
[英]Copying contents of h1 element to clipboard?
问题描述
So, I made a translator, and it isn't very good. 
所以，我做了一个翻译，但并不是很好。 But anyway, it is working and I want to try and add something where you can copy the result. 但无论如何，它正在工作，我想尝试添加一些可以复制结果的东西。 Is there a way to do this? 有没有办法做到这一点？ Below is my code: Thanks in advance! 以下是我的代码：提前致谢！ I know there is a way to do this with inputs, but I'm not sure if it can be done with headings. 我知道有一种方法可以用输入来做到这一点，但我不确定它是否可以用标题来完成。
var myText; var letters; var letterslength; var result; var firstletter; var newresult; var vowels = ['a', "e", "i", "o", "u"] function GO(){ myText=document.getElementById('inputBox').value; letters=myText.split(""); //console.log(letters); letterslength=letters.length; if(vowels.includes(letters[0])){ letters = letters.join(''); result=letters+'yay'; document.getElementById('changetext').innerHTML=result; history.push(result); } else{ firstletter=letters[0] letters.shift(); letters = letters.join(''); result=letters+firstletter; newresult=result+"ay"; document.getElementById('changetext').innerHTML=newresult; } } function copy(){ var copyText = document.getElementById("changetext"); copyText.select(); document.execCommand("copy"); document.getElementById('copyer').innerHTML="Copied"+copyText.value; setTimeout(revert, 3000); } function revert(){ document.getElementById('copyer').innerHTML= 'Copy To Clipboard!'; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <DOCTYPE html> <html> <head> <title>Pig Latin Translator!</title> <link href="style.css" rel="stylesheet"> </head> <body> <br> <h1>Pig Latin Translator</h1> <p>You are on the island of Pig Land. You must learn the difficult language of Pig Latin. Lucky for you, you can use this website to help you survive. One word at a time please.</p> <br> <br> <input id="inputBox" placeholder="Type your English Here..."> <br> <br> <br> <button onclick="GO();">Translate!</button> <br> <h1 id="changetext">...and the text will appear here!</h1> <button style="width: 100px; display: inline;" id="copyer" onclick="copy();">Copy To Clipboard!</button> <br> <br> </body> </html>
2 个解决方案
解决方案1
2 2018-12-14 04:20:27
Here's a function that copies text from an element: 这是一个从元素复制文本的函数：
function copyElementText(id) {
var text = document.getElementById(id).innerText;
var elem = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
Just call it on your heading like so: 只需在你的标题上调用它：
copyElementText("changeText");
And it will work! 它会工作！
Demonstration snippet: 演示片段：
function copyElementText(id) { var text = document.getElementById(id).innerText; var elem = document.createElement("textarea"); document.body.appendChild(elem); elem.value = text; elem.select(); document.execCommand("copy"); document.body.removeChild(elem); }
<button onclick="copyElementText('heading')">Click Me!</button> <h1 id="heading">Text to be Copied</h1>
解决方案2
1 已采纳 2018-12-14 04:31:43
To copy text you could use: 要复制文本，您可以使用：
var temp = document.createElement("textarea");
document.body.appendChild(temp);
temp.value= copyText.innerText
temp.select();
document.execCommand("copy");
Replaced: document.getElementById('copyer').innerHTML="Copied"+copyText.value; 替换： document.getElementById('copyer').innerHTML="Copied"+copyText.value; into document.getElementById('copyer').innerText="Copied "+temp.value; 到document.getElementById('copyer').innerText="Copied "+temp.value;
temp.value is temporary data to copied to clipboard. temp.value是要复制到剪贴板的临时数据。 After you're done using temporary data don't forget to remove temporary data by: document.body.removeChild(temp); 您正在使用的临时数据不要忘记删除临时数据完成后 ： document.body.removeChild(temp);
Check the following fiddle: 检查以下小提琴：
var myText; var letters; var letterslength; var result; var firstletter; var newresult; var vowels = ['a', "e", "i", "o", "u"] function GO(){ myText=document.getElementById('inputBox').value; letters=myText.split(""); //console.log(letters); letterslength=letters.length; if(vowels.includes(letters[0])){ letters = letters.join(''); result=letters+'yay'; document.getElementById('changetext').innerHTML=result; history.push(result); } else{ firstletter=letters[0] letters.shift(); letters = letters.join(''); result=letters+firstletter; newresult=result+"ay"; document.getElementById('changetext').innerHTML=newresult; } } function copy(){ var copyText = document.getElementById("changetext"); var temp = document.createElement("textarea"); document.body.appendChild(temp); temp.value= copyText.innerText temp.select(); document.execCommand("copy"); document.getElementById('copyer').innerText="Copied "+temp.value; document.body.removeChild(temp); setTimeout(revert, 3000); } function revert(){ document.getElementById('copyer').innerHTML= 'Copy To Clipboard!'; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <DOCTYPE html> <html> <head> <title>Pig Latin Translator!</title> <link href="style.css" rel="stylesheet"> </head> <body> <br> <h1>Pig Latin Translator</h1> <p>You are on the island of Pig Land. You must learn the difficult language of Pig Latin. Lucky for you, you can use this website to help you survive. One word at a time please.</p> <br> <br> <input id="inputBox" placeholder="Type your English Here..."> <br> <br> <br> <button onclick="GO();">Translate!</button> <br> <h1 id="changetext">...and the text will appear here!</h1> <button style="width: 100px; display: inline;" id="copyer" onclick="copy()">Copy To Clipboard!</button> <br> <br> </body> </html>
You could explore more about How do I copy to the clipboard in JavaScript? 您可以详细了解How do I copy to the clipboard in JavaScript? in here 在这里
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.