隐藏的 TextArea 复制到剪贴板答案

【问题标题】：Hidden TextArea Copies to Clickboard隐藏的 TextArea 复制到剪贴板
【发布时间】：2017-01-11 10:52:54
【问题描述】：

我正在尝试设置一个包含按钮列表的页面，以列（签名、返回、查询等）为单位。目前文本已内置到 textarea 功能中，请参阅：

<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，列是idcategoryshortnamelongnametext

【问题讨论】：

只要使用clipboardjs.com
仅仅因为 textarea 被 visibility:hidden 或 display:none 隐藏，您仍然应该能够使用 document.getElementById('copyTarget').value 获得 value。问题可能出在我们从给定代码示例中看不到的其他地方吗？

标签： javascript php jquery html mysql

【解决方案1】：

试试这个：

$(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>

【讨论】：