javascript - 将 h1 元素的内容复制到剪贴板?

标签 javascript jquery html css string

所以,我做了一个翻译器,但不是很好。但无论如何,它正在运行,我想尝试添加一些可以复制结果的东西。有没有办法做到这一点?下面是我的代码: 提前致谢!我知道有一种方法可以通过输入来做到这一点,但我不确定是否可以通过标题来做到这一点。

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>

最佳答案

这是一个从元素复制文本的函数:

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);
}

像这样在你的标题上调用它:

copyElementText("changeText");

它会起作用的!

演示片段:

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>

关于javascript - 将 h1 元素的内容复制到剪贴板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53773348/

相关文章:

javascript - JQuery 滚动()太慢

javascript - 如何使用selenium python获取 Canvas 后面的文本

javascript - iOS 上的 JQ UI 可拖动 : initiating dragging in taphold-handler

css - 如何设置较小DIV的垂直滚动条与较大DIV的右侧对齐?

javascript - 将html页面预渲染成图像

jquery - 就地编辑与单独的编辑页面/模式?

javascript - 如何在循环中从起始位置进行转换?

javascript - 计算两个日期之间耗时量

javascript - jquery 按钮交互在多次交互后变慢

javascript - 在高亮元素的拖动更改边框上