隠しテキストエリアClickboardへのコピー

ボタンのリストを列挙したページ（シグネチャ、返品、お問い合わせなど）をセットアップしようとしています。現在、テキストはテキストエリアの機能に組み込まれている、以下を参照してください。隠しテキストエリアClickboardへのコピー

<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データベースからテキストエリアの値を引っ張っされますが、私はそれを行うことができ、考え出し得れば。今、私はstyle:hidden;を使用しようとしていますが、テキスト領域を隠していますが、コピー機能は失われています。 JavaScript関数のコードは以下の通りです：

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

私が言ったように、これは私がテキストエリアを非表示にしたときが動作を停止し、フィールドが表示されているときに動作します。これには解決策がありますか？データベースとテーブル名はtemplatesある

、列はidcategoryshortnamelongnametext

出典

2016-09-03 Brandin Arsenault

だけでテキストエリアはどちらか '可視性によって隠されているからといってhttps://clipboardjs.com –

を使用します。hidden'または'表示：あなたはまだ[値]を得ることができる必要がありNONE' 'document.getElementById（ 'copyTarget'）。value'を使用します。与えられたコードの例からわからない問題が他にもあるかもしれませんか？ – DavidDomain

はこれを試してみてください、次のとおりです：参考

は、neccesary場合、MySQLでのテーブルには、次の情報を使用しています

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

出典

2016-09-03 14:05:50 Ehsan

隠しテキストエリアClickboardへのコピー

答えて

関連する問題