将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>
推荐答案
要复制文本，您可以使用:
To copy text you could use:
var temp = document.createElement("textarea");
document.body.appendChild(temp);
temp.value= copyText.innerText
temp.select();
document.execCommand("copy");
已替换:document.getElementById('copyer').innerHTML="Copied"+copyText.value;转换为document.getElementById('copyer').innerText="Copied "+temp.value;
temp.value是要复制到剪贴板的临时数据. 完成 后使用临时数据 不要忘记通过以下方式删除 临时数据:document.body.removeChild(temp);
temp.value is temporary data to copied to clipboard. After you're done using temporary data don't forget to remove temporary data by: 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>
您可以在 查看全文
