KangJaz.com

Tempat Tips, Tutorial dan Source Code dari seorang newbie

Cara Membuat Copy to Clipboard Sederhana dengan Javascript

25 Oktober 2018 | Kategori : JavaScript

Setelah beberapa kesibukan, akhirnya pada kesempatan kali ini saya bisa menyapa sobat semua.. lama juga ya ternyata hehehe.. Oh iya sobat, pastinya kalian sudah sering melihat fitur copy to clipboard bukan? Nah, pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat fitur copy to clipboard sederhana menggunakan javascript.

clipboard.png

Apa sih fitur Copy to Clipboard itu ?

Fitur copy to clipboard merupakan sebuah fitur yang mempermudah user dalam mengcopy sebuah text daalm sebuah form html. Dengan fitur ini, user tidak perlu repot-repot untuk memblock terlebih dahulu text yang ingin dicopy kemudian mengklik kanan lalu pilih copy maupun menggunakan tombol kombinasi ctrl+c hanya untuk meng-copy sebuah text tersebut.

Sulit nggak sih bikinnya ?

Jawabannya tentu saja tidak sob, karena untuk membuat fitur copy to clipboard ini, kita hanya bermain dengan beberapa fungsi yang sudah disediakan oleh javascript untuk proses select dan juga copy text-nya.

Cara membuat fitur Copy to Clipboard

Baik langsung saja ya sobat kita praktikkan cara membuat fitur Copy to Clipboard ini. Silahkan sobat buka text editor yang sobat sukai, kemudian silahkan buat sebuah file dengan extensi .html ya

Script HTML

Jika sobat sudah membuat sebuah file dengan extensi .html, langkah selanjutnya silahkan sobat ketikkan script html di bawah ini pada file tersebut

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Copy Clipboard</title>
    </head>

    <body>
        <h4>Copy to Clipboard</h4>
        <input type="text" value="Kang jaz blog's" id="pilih" readonly />
        <button type="button" onclick="copy_text()">Copy</button>
    </body>
</html>

Script CSS

Setelah kita mengetikkan script html-nya, sekarang kita tambahkan script css agar tampilannya lebih menarik ya sob. Silahkan sobat ketikkan script CSS di bawah ini tepat di atas tag </head> ya.

<style type="text/css">
    body {
        font-family: sans-serif;
        padding: 30px;
    }
    h4 {
        font-size: 25px;
    }
    input[type="text"],
    button[type="button"] {
        padding: 10px 15px;
        font-size: 16px;
        border-radius: 5px;
    }
    input[type="text"] {
        width: 300px;
        border: 1px solid #bbb;
    }
    button[type="button"] {
        background: #7aac42;
        border: 1px solid #7aac42;
        color: #fff;
        cursor: pointer;
    }
</style>

Script JavaScript

Setelah kita menambahkan script CSS, langkah terakhir ialah menambahkan script JavaScipt pada file tersebut agar fiturnya berfungsi. Untuk itu, silahkan sobat mengetikkan script di bawah ini tepat di atas tag pada file yang sobat buat tadi.

<script type="text/javascript">
    function copy_text() {
        document.getElementById("pilih").select();
        document.execCommand("copy");
        alert("Text berhasil dicopy");
    }
</script>

Kemudian silahkan sobat simpan dan jalankan file tersebut dengan men-double click file-nya. Untuk tampilannya kurang lebih seperti pada gambar di bawah ini ya sobat.

copy-clipboard.png

Gimana sobat? cukup mudah bukan. Oh iya sobat, sedikit penjelasan dari JavaScript-nya ya. Jadi script document.getElementById("pilih").select akan mencari form html dengan id "pilih" (tanpa kutip) kemudian men-select semua text / value dalam form tersebut. Nah, sedangkan untuk script documen.execCommand("copy") ini akan menjalankan perintah copy, sehingga text yang ada pada form langsung ter-copy hanya dengan mengklik buttonnya, tanpa harus melakukan klik kanan> copy maupun menekan kombinasi tombol ctrl+c pada keyboard.

Baik sobat, saya rasa cukup ini yang bisa saya bagikan kepada sobat semua pada kesempatan kali ini. Semoga sedikit tulisan ini bisa bermanfaat bagi sobat semua ya

CMIIW