copy text to clipboard html menggunakan JavaScript

Ada banyak situasi di mana pengguna ingin menyalin teks dari suatu elemen dalam halaman web. Mungkin itu adalah pengodean yang rumit atau mungkin informasi yang sangat penting yang harus disimpan. Dalam artikel ini, kita akan menjelajahi cara menyalin teks ke clipboard menggunakan HTML dan JavaScript.

HTML Clipboard API

Sebelum kita melangkah lebih jauh, penting untuk mencatat bahwa mengakses clipboard pengguna menggunakan JavaScript dianggap berbahaya dan tidak aman oleh beberapa browser. Namun, beberapa browser modern menyediakan Clipboard API yang aman untuk digunakan. Dalam tutorial ini, kita akan menggunakan HTML Clipboard API.

Langkah 1: Markup HTML dasar

Mari kita mulai dengan membuat elemen HTML dasar untuk menyalin teks. Dalam contoh ini, kita akan menggunakan elemen untuk menampilkan teks yang akan disalin dan tombol yang akan digunakan untuk menyalin teks tersebut.</p><p>```html <label for="text">Teks:</label> <textarea id="text" rows="4" cols="50"> Salin teks ```

Langkah 2: Menerapkan fungsi penyalinan

Selanjutnya, kita perlu menerapkan fungsi JavaScript yang akan menyalin teks ke clipboard pengguna saat tombol "Salin teks" diklik. Berikut adalah contoh kode JavaScript:

```javascript const copyButton = document.querySelector("#copy-button"); const textArea = document.querySelector("#text");

copyButton.addEventListener("click", () => { textArea.select(); document.execCommand("copy"); alert("Teks berhasil disalin!"); }); ```

Dalam kode di atas, kita menggunakan metode `select()` untuk memilih teks dalam elemen dan `execCommand("copy")` untuk menyalin teks yang sudah dipilih ke clipboard pengguna. Setelah ini, kita menampilkan pesan konfirmasi.</p><p>Langkah 3: Mengimplementasikan CSS</p><p>Menambahkan sedikit CSS akan memberikan tampilan yang lebih baik pada contoh ini. Di bawah ini adalah contoh kode CSS yang dapat Anda gunakan:</p><p>```css body { font-family: sans-serif; text-align: center; margin-top: 50px; }</p><p>textarea { margin-bottom: 20px; }</p><p>button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } ```</p><p>Kesimpulan</p><p>Dalam artikel ini, kami telah menjelaskan cara menyalin teks ke clipboard menggunakan HTML Clipboard API. Penggunaan Clipboard API memberikan cara yang lebih aman dan tersedia untuk mengakses clipboard pengguna melalui JavaScript. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah mengimplementasikan fungsi penyalinan teks ke halaman web Anda.</p><p>Namun, penting untuk dicatat bahwa tidak semua browser mendukung Clipboard API. Jadi, sebaiknya Anda meluangkan waktu untuk memeriksa apakah browser yang Anda pakai mendukung fitur ini sebelum mengimplementasikannya di situs web Anda.</p> <!--新闻内容--> </div> <div class="shangxia"> <!-- 上一篇 --> <span><strong>Previous:</strong> <a href="/2951.html" rel="prev">control plan injection molding</a></span> <!--新闻上一篇数据调取形式--><!-- 下一篇 --> <span> <strong>Next:</strong> <a href="/2953.html" rel="prev">copy to clipboard angular</a> </span> <!--新闻上一篇数据调取形式--> </div> <div class="form-review wow fadeInUp"> <h5 class="title">message</h5> <p>Take a minute to fill in your message!</p> <p>Please enter your comments <span style="color: #ff0101;">*</span></p> <ul class="list-star"> <li><a href="#"><i class="far fa-star"></i></a></li> <li><a href="#"><i class="far fa-star"></i></a></li> <li><a href="#"><i class="far fa-star"></i></a></li> <li><a href="#"><i class="far fa-star"></i></a></li> <li><a href="#"><i class="far fa-star"></i></a></li> </ul> <div class="themesflat-contact-form style-2 clearfix"> <form id="contactform" action="/post.php" method="post" accept-charset="utf-8" class="form-submit contact-form wpcf7-form"> <span class="wpcf7-form-control-wrap your-name"> <input type="text" tabindex="1" id="name" name="name" value="" class="wpcf7-form-control" placeholder="Nick name :" required> </span><span class="wpcf7-form-control-wrap your-email"> <input type="email" tabindex="3" id="email" name="email" value="" class="wpcf7-form-control" placeholder="Email Address :" required> </span><span class="wpcf7-form-control-wrap your-message"> <textarea name="message" tabindex="5" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" placeholder="Write a message :" required>