WEBページ制作

WEBページ制作の話題に関するフォーラムです。
  • 解決済みのトピックにはコメントできません。
このトピックは解決済みです。
質問

 
(Windows 10 Pro : HTML)
クリックでコリップボードにコピーする方法について
投稿日時: 20/02/13 11:22:28
投稿者: takatada72

お世話になります。
 
HTMLがよく理解できていないため、色々な掲示板を探してこちらのサイトを見つけた次第です。
 
HTML内のボタンをクリックすると、左に記載されているテキストをコピーする
ものを一覧で作りたいのですが、いまいち望んだ結果にたどり着きませんでした。
下記の内容は、他のサイトのものを利用させて頂き、複数できないかとトライして見た
のですがだめでした。
※「テキスト」■■■(ボタン) ボタンをクリックすると、テキストがクリップボードに
コピーされるようなものを作りたいのです。可能な限り、一覧で沢山表示させたいのです。
※下記は、2つのボタンを作って、どちらかをクリックすると、それぞれのテキストをコピー
したいのですが、copyTarget1の方しかコピーできない状態です。
 
どなたかご指導頂けないでしょうか
将来的には、アドレス帳一覧を作って、メールを送信時に利用したいのです。
 
お忙しいとは思いますが宜しくお願い致します。
 
 
<body>
 
    <!-- コピー対象要素とコピーボタン -->
    <input id="copyTarget" type="text" value="コピーできるかな" readonly>
    <button onclick="copyToClipboard()">Copy text</button>
 
<P>
 
    <!-- コピー対象要素とコピーボタン -->
    <input id="copyTarget1" type="text" value="コピーできるかな1" readonly>
    <button onclick="copyToClipboard()">Copy text1</button>
 
    <!-- bodyタグ内の下部に以下を入力する -->
    <script>
        function copyToClipboard() {
            // コピー対象をJavaScript上で変数として定義する
            var copyTarget = document.getElementById("copyTarget");
 
            // コピー対象のテキストを選択する
            copyTarget.select();
 
            // 選択しているテキストをクリップボードにコピーする
            document.execCommand("Copy");
 
            // コピーをお知らせする
            alert("コピーできました! : " + copyTarget.value);
        }
    </script>
     
        <script>
        function copyToClipboard() {
            // コピー対象をJavaScript上で変数として定義する
            var copyTarget1 = document.getElementById("copyTarget1");
 
            // コピー対象のテキストを選択する
            copyTarget1.select();
 
            // 選択しているテキストをクリップボードにコピーする
            document.execCommand("Copy");
 
            // コピーをお知らせする
            alert("コピーできました! : " + copyTarget1.value);
        }
    </script>
</body>

投稿日時: 20/02/13 11:49:36
投稿者: takatada72

追加させて頂きます。
 
下記のように太字部分を変更したところ、コピーできました。
ただ、10以上作ろうとすると、同じようなものを数だけコピーをするので、
あまり良くないような気がしております。
 
こちらをもっと簡素化できないでしょうか
 
お忙しいとは思いますが宜しくお願い致します。
 
<body>
  
    <!-- コピー対象要素とコピーボタン -->
    <input id="copyTarget" type="text" value="コピーできるかな" readonly>
    <button onclick="copyToClipboard()">Copy text</button>
  
<P>
  
    <!-- コピー対象要素とコピーボタン -->
    <input id="copyTarget1" type="text" value="コピーできるかな1" readonly>
    <button onclick="copyToClipboard1()">Copy text1</button>
  
    <!-- bodyタグ内の下部に以下を入力する -->
    <script>
        function copyToClipboard() {
            // コピー対象をJavaScript上で変数として定義する
            var copyTarget = document.getElementById("copyTarget");
  
            // コピー対象のテキストを選択する
            copyTarget.select();
  
            // 選択しているテキストをクリップボードにコピーする
            document.execCommand("Copy");
  
            // コピーをお知らせする
            alert("コピーできました! : " + copyTarget.value);
        }
    </script>
      
        <script>
        function copyToClipboard1() {
            // コピー対象をJavaScript上で変数として定義する
            var copyTarget1 = document.getElementById("copyTarget1");
  
            // コピー対象のテキストを選択する
            copyTarget1.select();
  
            // 選択しているテキストをクリップボードにコピーする
            document.execCommand("Copy");
  
            // コピーをお知らせする
            alert("コピーできました! : " + copyTarget1.value);
        }
    </script>
</body>

回答
投稿日時: 20/02/13 15:53:26
投稿者: hatena
投稿者のウェブサイトに移動

引数でコピー対象のID名を渡せば、関数は一つで済みます。
 

<p>
<!-- コピー対象要素とコピーボタン -->
<input id="copyTarget" type="text" value="コピーできるかな" readonly>
<button onclick="copyToClipboard('copyTarget')">Copy text</button>
</p>
<p>
  <!-- コピー対象要素とコピーボタン -->
  <input id="copyTarget1" type="text" value="コピーできるかな1" readonly>
  <button onclick="copyToClipboard('copyTarget1')">Copy text1</button>
</p>
  <!-- bodyタグ内の下部に以下を入力する -->
  <script>
    function copyToClipboard(Target) {
      // コピー対象をJavaScript上で変数として定義する
      var copyTarget = document.getElementById(Target);

      // コピー対象のテキストを選択する
      copyTarget.select();

      // 選択しているテキストをクリップボードにコピーする
      document.execCommand("Copy");

      // コピーをお知らせする
      alert("コピーできました! : " + copyTarget.value);
    }
  </script>

投稿日時: 20/02/14 09:37:26
投稿者: takatada72

hatena 様
 
早速、ありがとうございました。
HTMLの内容を短くできそうです。
 
後ほど、トライさせて頂きます。
 
報告は、後日させて頂きます。
 

投稿日時: 20/02/14 09:53:00
投稿者: takatada72

hatena 様
 
 
お世話になりました。
 
無事、解決できました。
これでHTMLがスッキリしました。
 
ありがとうございました。
 
クローズさせて頂きます。