Codelapan
  • Home
  • Bootstrap
  • Codeigniter
  • Katalon
  • Laravel
    • Home
    Topics
    Laravel

    Laravel
    Livewire

    Livewire
    Software Testing

    Testing
    bootstrap

    Bootstrap
    source code

    Code
    HTML

    HTML
    CSS

    CSS
    Javascript

    Javascript
    jQuery

    jQuery

    Codelapan
    Cara Membuat Copy to Clipboard dengan Javascript

    Cara Membuat Copy to Clipboard dengan Javascript

    Admin
    Admin・ 14 April 2021
    5 min read ・ 11121 views

    Copy to Clipboard dengan Javascript - Pernahkan kamu melihat di suatu halaman website terdapat fitur copy URL to clipboard ? fitur ini sangat membantu user atau visitor untuk menyalin URL dari postingan website, sehingga user tidak perlu copy atau menyalin URL secara manual. Apakah kamu berniat untuk menambahkan fitur copy URL to clipboard di website kamu ? jika iya, kamu sangatlah tepat membaca artikel ini karena di artikel ini kita akan sama-sama belajar bagaimana cara membuat fitur copy URL to clipboard menggunakan javascript. Caranya sangat mudah sekali, kita hanya perlu menyiapkan text editor, browser dan jaringan internet (optional).

    Langsung saja ke langkah-langkah bagaimana cara membuat fitur copy to clipboard menggunakan javascript. Pertama kita akan membuat file html terlebih dahulu, disini saya akan membuat file html dengan nama index.html, kemudian copy kode di bawah ini dan paste di file html yang baru saja dibuat.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Copy to Clipboard</title>
    </head>
    <body>
        <!-- The text field -->
        <input type="text" value="https://bisabos.com/blog/cara-membuat-animasi-mengetik-teks-dengan-css-dan-javascript" id="copyText" readonly>
        <!-- The button used to copy the text -->
        <button id="copyBtn">Copy text</button>
    </body>
</html>

    Pada kode di atas, kita membuat elemen input text yang mempunyai value statis berupa URL, id="copyText" dimana id ini nanti akan kita panggil di javascript, kemudian input ini kita kasih kondisi readonly artinya user tidak bisa melakukan input atau hanya bisa dibaca atau dilihat saja. Dan juga kita membuat button atau tombol yang kita kasih id="copyBtn", dimana id ini nanti juga akan dipanggil di javascript. Skenarionya, jika button atau tombol Copy Text ditekan, akan menjalankan command copy atau biasanya kita menjalankan copy text dengan cara Ctrl+c atau select text-klik kanan-copy.

    Kemudian tambahkan script javascript di bawah ini sebelum tag </body>

    <!--using sweetalert via CDN -->
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
        <script>
            const copyBtn = document.getElementById('copyBtn')
            const copyText = document.getElementById('copyText')
            
            copyBtn.onclick = () => {
                copyText.select();    // Selects the text inside the input
                document.execCommand('copy');    // Simply copies the selected text to clipboard 
                 Swal.fire({         //displays a pop up with sweetalert
                    icon: 'success',
                    title: 'Text copied to clipboard',
                    showConfirmButton: false,
                    timer: 1000
                });
            }
        </script>

    Disini kita menggunakan CDN Sweetalert untuk menampilkan pop up ketika user atau kita klik button atau tombol Copy text. Dan penjelasan sedikit mengenai script javascript di atas, kita mendefinisikan copyBtn dari id pada elemen button yang sudah dibuat sebelumnya dan juga copyText dari elemen input text dengan id copyText. Kemudian jika button dengan id copyBtn kita klik, javascript akan menjalankan atau mengeksekusi command "copy" value pada elemen input text yang sudah kita kasih id copyText. Kemudian setelah menjalankan perintah atau command copy, akan memunculkan pop up yang dibuat menggunakan sweetalert dengan icon success,  title "Text copied to clipboard dan dengan timer 1000.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Copy to Clipboard</title>
    </head>
    <body>
        <!-- The text field -->
        <input type="text" value="https://bisabos.com/blog/cara-membuat-animasi-mengetik-teks-dengan-css-dan-javascript" id="copyText" readonly>
        <!-- The button used to copy the text -->
        <button id="copyBtn">Copy text</button>
        <!--using sweetalert via CDN -->
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
        <script>
            const copyBtn = document.getElementById('copyBtn')
            const copyText = document.getElementById('copyText')
            
            copyBtn.onclick = () => {
                copyText.select();    // Selects the text inside the input
                document.execCommand('copy');    // Simply copies the selected text to clipboard 
                 Swal.fire({         //displays a pop up with sweetalert
                    icon: 'success',
                    title: 'Text copied to clipboard',
                    showConfirmButton: false,
                    timer: 1000
                });
            }
        </script>
    </body>
</html>

    Secara keseluruhan, kode dari yang kita buat dari latihan membuat fitur copy to clipboard dengan javascript ini atau kode yang ada di file index.html akan seperti gambar di atas. Jika kamu ingin menerapkan fitur ini pada website yang dibuat dengan menggunakan framework laravel, dan kamu ingin agar value pada elemen input text bernilai dinamis atau sesuai URL dari halaman tersebut, kamu bisa mengubahnya menjadi value="{{url()->current()}}" atau seperti di bawah ini.

    <input type="text" value="{{ url()->current() }}" id="copyText" readonly>

    Kesimpulan

    Kita telah sama-sama belajar bagaimana cara membuat fitur copy URL to clipboard dengan javascript, dari langkah-langkah yang telah disajikan di artikel ini cukup mudah diikuti bukan ? Mungkin dapat kita simpulkan bersama bahwa keberadaan fitur copy to clipboard pada suatu website memang sangatlah penting atau sangat membantu user untuk menyalin URL untuk dibagikan, terlebih untuk website yang memuat konten seperti artikel atau blog.

    Sekian artikel kali ini yang membahas bagaimana cara membuat fitur copy to clipboard dengan javascript, jika teman-teman mempunyai cara lain bisa dishare di form komentar di bawah ini atau jika ada kritik, saran, masukan atau apapun itu yang ingin didiskusikan, silahkan tulis di form komentar.

    Sampai jumpa di artikel berikutnya.

    Javascript
    Artikel Sebelumnya

    Cara Membuat Animasi Mengetik Teks Dengan CSS dan...
    Artikel Selanjutnya

    Membuat Bottom Navbar Seperti Instagram Dengan Boo...
    Tinggalkan Komentar
    Loading Comments
    Favorit See All