Keranjang Coding : product


?>

Cara Membuat Copy Teks di Clipboard dengan JavaScript





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)

 

7. Ketiikan kata maupun kalimat pada teks sesuai keinginan kamu. kemudian klik copy 

Setelah teks tersebut disalin, maka melakukan paste hasil salinan teks tersebut ke tempat yang sesuai dengan keinginan dan keperluan kamu

 

Tags : html javascript

Sekilas Tentang Penulis


Kharisma Maulana Pasaribu,ST
Software Engineer | Fullstack Developer | Founder of Matadeveloper.com



Prev Post
Membuat Tambah,Sisip, Hapus Baris Menggu
Next Post
Tutorial Cara Menginstall Codeigniter 4