Membuat Copy Area

Copy Area

Adalah suatu kolom yang berisi teks atau kode yang ditampilkan dengan tombol copy agar lebih mudah disalin ke Clipboard.
Biasanya ini digunakan pada postingan yang memberikan panduan pemasangan kode baik itu berupa teks, HTML, CSS ataupun Script.

Contoh :

Teks ini didalam tag <pre>

Pastekan dikolom dibawah ini :

Pada contoh diatas, kolom yang digunakan untuk memuat teks / kode adalah tag <pre>, namun bisa juga menggunakan tag lainnya misal :
<div> atau <textarea>
Dan semua tag tersebut bisa digunakan dan diberikan gaya / style dengan CSS untuk membedakan isi kolom dengan teks materinya. Kecuali untuk tag textarea mungkin style yang dapat diterapkan lebih terbatas dibandingkan tag <pre> dan <div>.
Dibawah ini adalah tampilan kode HTML untuk penggunaan masing-masing tag :
pre :

<pre>Teks ini didalam tag &lt;pre&gt;</pre>

div :

<div>Teks ini didalam tag &lt;div&gt; </div>

textarea :

<textarea>Teks ini didalam tag &lt;textarea&gt;</textarea>

Script :

<script>
function copyFunction() {
  const copyText = document.getElementById("myInput").textContent;
  const textArea = document.createElement('textarea');
  textArea.textContent = copyText;
  document.body.append(textArea);
  textArea.select();
  document.execCommand("copy");
  alert("Teks telah dicopy ");
}
document.getElementById('button').addEventListener('click', copyFunction);
</script>