Cara Membuat Copy to Clipboard Sederhana dengan 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.
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
