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

2024-05-07

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

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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 h1 元素的内容复制到剪贴板? 的相关文章

随机推荐

  • 在 Linux 2.6.21 (glibc 2.3.5) 上进行 ARP 和反向 ARP

    我需要在任意 IP 网络上存储对第三方设备的持久引用 其中设备的 IP 地址可能是静态的或由 DHCP 随机分配 我不控制网络上的设备 也不能依赖 DNS 和其他现有的或与设备一起使用的临时网络协议 所以我被指示使用硬件地址和 ARP 进行
  • Haskell 中函数和函子有什么区别?只有定义吗?

    在 Haskell 中 当编写函数时 这意味着我们将某个东西 输入 映射到另一个东西 输出 我尝试 LYAH 来理解 Functor 的定义 看起来和普通 Functor 一样 函数被称为函子有什么限制吗 Functor 是否允许有 I O
  • 将组合字符串和数字输入的元胞数组写入文本文件

    考虑以下 DateTime 2007 01 01 00 00 2007 02 01 00 00 2007 03 01 00 00 Headers Datetime Data Dat 100 200 300 Data DateTime num
  • 使用 mvel 检查 List 中是否存在元素

    我随身带着一份清单 清单就像 List
  • Apache Kafka 消费者组的偏移量如何过期?

    当我注意到一些奇怪的行为时 我正在对一个旧主题进行一些测试 阅读 Kafka 的日志时 我注意到这条 删除了 8 个过期的偏移量 消息 GroupCoordinator 1001 Stabilized group GROUP NAME ge
  • 如何在循环中正确释放jstring?

    我的应用程序需要使用jni 逻辑如下 void myJniFunc JNIEnv env jclass clazz jobjectArray items int count 10 struct MyObj myObjArray struct
  • 如何在Python中创建一个派生自QObject的抽象基类

    我正在尝试为接口创建一个抽象基类 但我需要它从 QObject 派生信号和槽 我的类定义如下 import abc from PyQt5 QtCore import QObject class interface class abc ABC
  • 关键字和非关键字参数的顺序

    我有以下代码 def say hello then call f f args kwargs print args is args print kwargs is kwargs print Hello Now I m going to ca
  • Angular .controller() 在 .run() AngularJS 之前运行

    我在 run 中有一个 ajax 调用 该调用将一个变量加载到 rootScope 中 该变量在与视图关联的控制器中是需要的 有时 在刷新 F5 时 当 controller 加载时 rootScope SuperCategories 中没
  • 使用 Vagrant,为什么 puppet 配置比自定义打包盒更好?

    我正在创建一个虚拟机来模仿我们的生产 Web 服务器 以便我可以与新开发人员共享它 让他们尽快上手 我已经阅读过 Vagrant 文档 但是我不明白使用通用基础盒并使用 Puppet 配置所有内容与打包已安装和配置所有内容的自定义盒相比有何
  • 如何在chrome中启用sharedArrayBuffer而不进行跨域隔离

    我有一个仅在本地计算机上运行的实验 例如 我加载外部网页https example com和 puppeteer 我注入一个 javascript 文件 该文件由http localhost 5000 到目前为止还没有问题 但是 这个注入的
  • 如何解决“错误:找不到与安装匹配的版本”?

    我正在尝试使用 pipelinenv 安装 django crispy forms 它安装是因为当我运行 pip freeze 命令时我看到它 当需要锁定 包 依赖项时 它面临锁定 我收到此错误 pipenv exceptions Reso
  • 如何修复在 laravel 项目中运行vendor/bin/phpunit 时权限被拒绝的问题

    每当我执行vendor bin phpunit在我的 laravel 项目的根路径中 它返回一个没有权限错误 我该如何解决这个问题 重要提示 我不想使用composer update或删除部分或全部vendor 目录然后使用composer
  • 使用 C 库时 C++ 中的常量正确性

    目前我正在开发一个 C 应用程序 我希望它是 const 正确的 意思是尽可能在参数上使用 const 之类的东西 然而 这个 C 应用程序使用了一个不经常使用 const 的 C 库 我遇到的问题是 当向 C 库中的函数发送参数时 参数不
  • 为什么 .Net 词典中的条目是按加法顺序排列的?

    我刚刚看到这种行为 我对此感到有点惊讶 如果我向字典中添加 3 或 4 个元素 然后执行 For Each 来获取所有键 它们将以我添加的顺序出现 这让我感到惊讶的原因是字典内部应该是一个哈希表 所以我希望事情能以任何顺序出现 按键的哈希排
  • 熊猫 Between_time 布尔值

    我正在尝试创建一个列 如果行值落在时间 09 00 和 17 00 之间 该列将分配 true 我可以使用轻松选择这些时间between time但无法分配新列 aTrue False df df between time 9 00 17
  • 如何在 iPhone 上实现炫酷的警报/信息叠加?

    我了解如何在我的 iPhone 应用程序中包含标准警报 并且可以使用 确定 或 关闭 按钮将其关闭 请参阅图中的示例 如何制作一个很酷的警报 通知覆盖层 就像 foursquare 应用程序中看到的那样 请参阅图片中的 foursquare
  • 在未排序的整数列表中最优搜索 k 个最小值

    我刚刚接受采访时提出了一个问题 我很好奇答案应该是什么 问题本质上是 假设您有一个包含 n 个整数的未排序列表 您如何找到此列表中的 k 个最小值 也就是说 如果您有一个 10 11 24 12 13 列表并且正在寻找 2 个最小值 您将得
  • 访问注释中的属性值

    我想访问注释中的属性值 作为属性的值 对于前 在我的属性文件中 我有一个条目表达式 3 10 在我的 Scheduler 类中 我使用注释 Scheduled cron VALUE 我想从表达式键对应的属性文件中读取这个值 尝试这样做 Va
  • 将 h1 元素的内容复制到剪贴板?

    所以 我做了一个翻译器 但效果不是很好 但无论如何 它正在工作 我想尝试添加一些可以复制结果的内容 有没有办法做到这一点 以下是我的代码 提前致谢 我知道有一种方法可以通过输入来完成此操作 但我不确定是否可以通过标题来完成 var myTe