Cara menggunakan button copy paste html

Question

Mengcopy sebuah text yang begitu panjang terkadang membuat kita kesal. Terkadang text yang akan dicopy tidak semuanya terseleksi/terblock. Bahkan tidak jarang sampai keluar area yang ingin kita copy, dalam arti kata lain kebablasan.

Kali ini saya akan memberikan sebuah fitur yang dapat mempermudah kalian dalam hal Copy + Paste sebuah text. Seperti halnya form Html, script atau text lainnya. Dengan fitur Copy All atau Select All, pengguna hanya cukup menekan tombol satu kali. Maka semua text akan terseleksi secara otomatis tanpa harus menggeser mouse tentunya.

Cara Membuat Tombol Copy/Select All Pada TEXT AREA :

1. Masuk ke akun Blogger > Tema/Template > Edit HTML.
2. Tekan tombol CTRL + F pada keyboard, lalu cari kode ]]></b:skin>
3. Copy All kode dibawah.

Copy All

4. Lalu paste tepat diatas kode ]]></b:skin>

5. Copy All kode dibawah.

Copy All

6. Lalu paste tepat diatas kode </body>

7. Copy All kode dibawah.

Copy All

Dengan begitu kita sudah bisa membuat tombol klik untuk salin. Cukup mudah bukan, demikian artikel kali ini yang membahas tentang cara membuat tombol copy dengan javascript, semoga bisa jadi referensi kalian ya, sampai jumpa di artikel lainnya

Javascript adalah salah satu bahasa pemrograman web tingkat tinggi. Javascript berfungsi untuk validasi atau manipulasi data baik tampilan atau sistem yang ada di dalam website. Clipboard ini berfungsi untuk menyimpan salinan teks sementara yang bisa dicopykan hasil salinan teks tersebut.

Bahasa pemrograman javascript bisa membuat fitur clipboard yang berfungsi sebagai alternatif pada penyalin (copy) teks dengan sistem blok text, tekan tombol CTRL + C, atau klik kanan, pilih “copy”. Ada beberapa website yang menerapkan clipboard teks dalam keperluan tertentu. Misalkan, website toko makanan dan minuman,customer harus memasukkan kode promo yang telah disediakan ke dalam bagian pembayaran agar dapat potongan harga. Terkadang ada kode promo yang sulit dibaca sehingga customer malas mengetik kode promo tersebut. Solusinya, kamu sebagai developer website tersebut harus membuat fitur clipboard ke dalam kode promo sehingga si pembeli tidak perlu mengetik lagi, melainkan dengan clipboard copy text.

Berikut ini pembahasan mengenai copy clipboard text dengan javascript.

Langkah - Langkah :

1. Silahkan buka teks editor seprti notepad++, sublime text, VS Code, Atom dan lain-lain.

2. Silahkan ketik code script di bawah ini.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Membuat Clipboard Copy Teks dengan JavaScript</title>
    </head>
<body>
<h2 align="center">Membuat Clipboard Teks dengan JavaScript</h2>
        <div align="center">
        <input type="text" value="" id="pilih" />
        <button type="button" onclick="copy_text()">Copy</button>
        </div>
    </body>
    <script type="text/javascript">
    function copy_text() {
        document.getElementById("pilih").select();
        document.execCommand("copy");
        alert("Teks Berhasil DIsalin Ke Clipboard.");
    }
</script>
</html>

3. Simpan hasil code script tadi dengan tekan CTRL + S.

4. PIlih lokasi tempat file yang akan disimpan sesuai dengan keinginan kamu, berikan nama "clipboard_text.html".

5. Klik Save

6. cari file tadi yang kamu simpan, kemudian klik kanan mouse-> open with -> Web Browser app(Chrome, Mozilla)

Mungkin temen temen ada yang bertanya tanya apakah dalam javascript itu dapat melakukan operasi copy paste ke clipboard. Nah itu lah yang akan rumah code bahas pada tutorial javascript kali ini. Jawaban nya adalah bisa, dalam javascript kita bisa melakukan operasi copy paste. Bagaimana cara melakukan operasi copy paste pada javascript? Simak tutorial nya di bawah ini.

Sebenarnya untuk membuat melakukan operasi copy string dengan menggunakan javascript sangatlah mudah cukup dengan menggunakan satu baris perintah saja kita dapat mengkopi sebuah string. Perhatikan perintah javascript copy di bawah ini

document.execCommand("copy");

namun yang menjadi masalah adalah apa yang akan di copy? Karena javascript hanya dapat mengcopy text atau string dari sebuah input yang dengan tipe tex atau text area. Solusinya adalah dengan cara mencopy dari salah satu elemet di atas. Biar jelas nya silahkan simak contoh javascript copy ci bawah ini.

Javascript Copy to clipboard

Contoh pertama yang akan saya berikan ini adalah contoh sederhana dari javascript copy to clipboard dengan menggunakan input dan text area.

Contoh 1 :




Contoh javascript copy to clipboard 


Copy From Input


Copy From Text Area

Contoh script di atas adalah contoh mengcopy sebuah scrit dari sebuah element value dengan menggunakan javascript. Saya akan membuat script lain yang tujuan nya sama dengan contoh 1.

Contoh 2 :




Contoh javascript copy to clipboard 


Copy From Input


Copy From Text Area

kedua contoh di atas adalah contoh yang mudah karena menggunakan element input atau text area. Sekarang bagaimana jika kita akan mencopy dari sebuah link atau selemnt html lainnya? Perhatikan contoh 3 di bawah ini

Contoh 3:




Contoh javascript copy to clipboard H
Contoh javascript copy to clipboard P
Rumahcode

Copy From H1
Copy From P
javascript copy text from link
javascript copy link

pada contoh di atas saya telah melakukan opreasi copy dengan menggunakan fungsi get element by id sekarang kita tinggal membuat perintah untuk mempaste nya.

Javascript Paste

Script untuk mendapatkan nilai dari clipboard dan mempaste nya adalah

async function paste() {
  const pastetext = await navigator.clipboard.readText();
  var ta =  document.getElementById("pastetext");
  ta.innerHTML = pastetext;
}

pada script di atas kita akan mempaste nilai yang di dapatkan dari clipboard ke text area dengan id pastetext.

kode html