草庐IT

javascript - 隐藏的 TextArea 复制到剪贴板

coder 2023-10-26 原文

我正在尝试设置一个包含按钮列表的页面，按列排列(签名、返回、查询等)。目前，文本内置于文本区域功能中，请参阅:

<td>
  <b>PartSelect</b>
  <br />
  <textarea id="copyTarget" 
            cols="25"
            rows="3">Customer Service&#10;www.partselect.com&#10;888-895-1535
  </textarea>
  <br />
  <button id="copyButton">Copy</button>
</td>

一旦我弄清楚了这部分代码，我将从 MySQL 数据库中提取 textarea 值，但我可以做到这一点。现在，我正在尝试使用 style:hidden; ，它确实隐藏了文本区域，但失去了复制功能。 Javascript函数代码如下:

document.getElementById("copyButton").addEventListener("click", function() {
  copyToClipboardMsg(document.getElementById("copyTarget"), "msg");
});

正如我所说，这在字段可见时有效，但在我隐藏文本区域时停止工作。有解决办法吗？

供引用，如果需要，MySQL中的表使用以下信息:

数据库和表名是templates，列是id category shortname longname 文本

最佳答案

试试这个:

$(document).ready(function(){

    $msg = "";

    $("#copyButton").on("click",function(){

        $msg = $("#copyTarget").text();
        $("#copyTarget").text("");
        $(this).prop({disabled:true});
        $("#pasteButton").removeAttr("disabled");

    })

    $("#pasteButton").on("click",function(){

         $("#pasteTxt").val($msg);
         $(this).prop({disabled:true});
         $("#copyButton").removeAttr("disabled");
        $msg = "";

    })

})

最终代码:

<html>
    <title>This is test</title>
    <head>
    </head>
    <body>
        <td>
             <b>PartSelect</b><br />
              <textarea id="copyTarget" cols="25" rows="3">Customer Service&#10;www.partselect.com&#10;888-895-1535</textarea>
            
              <br />
            
              <button id="copyButton">Copy</button>
              <button id="pasteButton" disabled>Paste</button>
            <br><br>
             <input type="text" id="pasteTxt" size="50">
        </td>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
    $(document).ready(function(){

        $msg = "";

        $("#copyButton").on("click",function(){

            $msg = $("#copyTarget").text();
            $("#copyTarget").text("");
            $(this).prop({disabled:true});
            $("#pasteButton").removeAttr("disabled");

        })

        $("#pasteButton").on("click",function(){

             $("#pasteTxt").val($msg);
             $(this).prop({disabled:true});
             $("#copyButton").removeAttr("disabled");
            $msg = "";

        })

    })
        </script>
    </body>
</html>

关于javascript - 隐藏的 TextArea 复制到剪贴板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39307366/

剪贴javascript34codeltphpjqueryhtmlmysql

有关javascript - 隐藏的 TextArea 复制到剪贴板的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. Ruby隐藏与覆盖 - 2

    我刚刚了解到，在Java中，覆盖和隐藏之间是有区别的(静态方法是隐藏的，而不是覆盖)，这意味着Java使用早期绑定(bind)和后期绑定(bind)。是否有与方法隐藏类似的东西，或者它只是具有方法重写？ 最佳答案 Java具有三种不同的“方法”:实例方法，静态方法和构造函数。Ruby只有一个:实例方法。在Java中，静态方法的行为必须不同于实例方法，因为类不是对象。它们没有类，因此也没有父类(superclass)，因此没有要覆盖的内容。在Ruby中，类与其他任何对象一样都是对象，它们具有一个类，该类可以具有父类(superclas

  3. ruby - 如何在 ruby​​ 中复制目录结构，不包括某些文件扩展名 - 2

    我想编写一个ruby​​脚本来递归复制目录结构，但排除某些文件类型。因此，给定以下目录结构:folder1folder2file1.txtfile2.txtfile3.csfile4.htmlfolder2folder3file4.dll我想复制这个结构，但不包含.txt和.cs文件。因此，生成的目录结构应如下所示:folder1folder2file4.htmlfolder2folder3file4.dll 最佳答案 您可以使用查找模块。这是一个代码片段:require"find"ignored_extensions=[".cs"

  4. ruby - 在两个 ActiveRecord 类之间合并/复制属性的好方法？ - 2

    之前有人问过这个问题，我发现了以下clip关于如何一次设置一个类对象的所有属性，但由于批量分配保护，这在Rails中是不可能的。(例如，您不能Object.attributes={})有没有一种很好的方法可以将一个类的属性合并到另一个类中？object1.attributes=object2.attributes.inject({}){|h,(k,v)|h[k]=vifObjectModel.column_names.include?(k);h}谢谢。 最佳答案 利用assign_attributes使用:without_prote

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. Ruby:我怎样才能复制这个数组？ - 2

    (跟进我之前的问题，Ruby:howcanIcopyavariablewithoutpointingtothesameobject?)我正在编写一个简单的Ruby程序来在.svg文件中进行一些替换。第一步是从文件中提取信息并将其放入数组中。为了避免每次调用此函数时都从磁盘读取文件，我尝试使用memoize设计模式-在第一次调用后的每次调用中都使用缓存结果。为此，我使用了一个在函数之前定义的全局变量。但是，即使我在返回局部变量之前将该变量.dup为局部变量，调用该变量的函数仍在修改全局变量。这是我的实际代码:#memoizetokeepfromhavingtoreadoriginalfi

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby Mechanize : multiline value for textarea gets merged - 2

    编辑:经过进一步测试，问题似乎是站点特定的，理论上应该可以正常工作。本应位于多行的Textarea值正在一行中全部提交。textarea_values="value1\nvalue2"form=page.form_with(:id=>'form_id_here')form['my_textarea']=textarea_valuessubmit=form.button_with(:value=>'Submit')form.click_button(submit)提交的值是value1\nvalue2而不是预期的多行。有没有我可以尝试的另一种添加表单值的方法？

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby-on-rails - Rails 4 真实性 token - 在 header 和表单隐藏输入中？ - 2

    我正试图在Rails中获得完整的页面缓存，但我在CSRF方面遇到了很大的障碍——或者可能只是我对它的理解。我目前有form_authenticity_token存储在cookie中的字符串，JS可以使用该cookie访问和重写header标签。我在生成的HTML中有两个地方可以找到标记:1)在头部2)在表单的隐藏输入元素中如前所述，这些哈希值彼此不同(在未启用缓存的开发模式下)。他们为什么不同？为什么我可以删除headmeta标签并保留表单输入并且允许请求​​？然而，当我删除表单输入标签并保留标题时，请求被拒绝了吗？实际上这意味着head标签是无用的，不是吗？我可以将表单输入标签重写为

随机推荐