Membuat Tombol Copy (Salin) ke Clipboard dari PRE - CODE

Program ini adalah contoh implementasi fungsi "Salin Kode" dengan menggunakan JavaScript. Ketika tombol "Salin Kode" di klik, maka kode yang terdapat di dalam elemen dengan id "input" akan disalin ke clipboard menggunakan fungsi navigator.clipboard.writeText(). Setelah itu, tombol "Salin Kode" akan berganti teks menjadi "Kode telah berhasil disalin!" sebagai umpan balik kepada pengguna. Setelah dua detik, tombol tersebut akan kembali ke teks semula yaitu "Salin Kode".

Program tersebut berguna untuk memudahkan pengguna dalam menyalin kode dari suatu halaman web tanpa harus melakukan proses copy paste secara manual.

Contoh Copy Kode

 
  
  CONTOH CODE YANG DI SALIN
    <script>
      const copyButton = document.getElementById("copy-button");
      const codeOutput = document.getElementById("input");

      copyButton.addEventListener("click", () => {
        const code = codeOutput.textContent;
        navigator.clipboard.writeText(code);
        copyButton.textContent = "Kode telah berhasil disalin!";
        setTimeout(() => {
          copyButton.textContent = "Salin Kode";
        }, 2000);
      });
    </script>
  

Code yang dipakai untuk membuat program ini, adalah sebagai berikut:

CSS :

    
<style>
  pre {
  background-color: #f4f4f4;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ddd;
  line-height: 1.5;
  overflow-x: auto;
}

code {
  font-family: monospace;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 3px;
  color: #4725ce;
}
      button {
        margin-top: 10px;
        padding: 5px 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
      button:hover {
        background-color: #3e8e41;
      }
</style>
    

HTML :

    <h1>Contoh Copy Kode</h1>
    <br />
<pre> <button id="copy-button">Salin Kode</button>
  <code class="language-js" id="input">
CONTOH CODE YANG DI SALIN
  </code>
</pre>    

Javascript :

Kemudian saya mencoba membuat untuk yang jika Code yang di Salin ada beberapa, maka hasilnya, sebagai contoh bisa dibuka di link berikut : Banyak Tombol Copy (Salin) ke Clipboard dari CODE