nafasmedia | Kali ini saya akan membagikan cara membuat tombol copy text to clipboard atau tombol untuk menyalin teks/kalimat kedalam clipboard. tombol ini biasanya terdapat pada website shortlink yang biasanya setelah kita membuat sebuah shortlink akan muncul hasil dari url yang kita pendekkan dan kita perlu menyalin url tersebut supaya bisa dibagikan kemedia sosial.
Nah biasanya pemilik website ingin memudahkan para user untuk mengakses website miliknya salah satunya yang saya sebutkan tadi, yaitu website shortlink, pemilik website shotlink ingin memudahkan usernya untuk menyalin url yang berhasil dipendekan agar tidak susah susah menekan CTRL + C.
Walaupun kita sudah terbiasa menekan CTRL + C, namun biasanya kita akan dihadapkan pada situasi dimana kita mager untuk menekan tombol CTRL + C, maka tombol copy inilah solusinya, kita cukup menekan tombol dan otomatis teks atau url sudah ada didalam clipboard. Kita akan membuat tombol ini hanya menggunakan html,css dan javascript. Bagi kalian yang penasaran bagaimana cara membuatnya silahkan simak tutorial berikut ini, Cekidot.
DEMO
Ada 2 metode untuk membuatnya metode pertama copy semua html,css,javascript dijadikan satu atau css dan javascript ditempatkan dikode html template. jadi silahkan pilih salah satu
METODE PERTAMA
Copy semua 1 paket kode dibawah dan letakan dimana kalian memasangnya, terserah kalian mau diletakan di halaman atau postingan sesuai kebutuhan kalian, saya menerapkan 1 paket kode ini pada contoh demo diatas.
<style>.text {
font-size: 14px;
padding: 3px;
}
.text,
.button {
font-size: 16px;
}
.button {
background-color: #068DB5;
color: white;
border: none;
border-radius: 3px;
padding: 5px;
outline: none;
float:center;
}
.button:active {
transform: translateY(1px);
}
.message {
opacity: 0;
transition: 0.5s;
}
.message.active {
opacity: 1;
}</style>
<center>
<input class="text" type="text" value="Isi text sembarang" />
<button class="button" type="button"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 488.3 488.3" style="enable-background:new 0 0 488.3 488.3;" xml:space="preserve" width="512px" height="512px" class=""><g transform="matrix(0.9801 0 0 0.9801 4.85858 4.85858)"><script xmlns="" class="active-path" style=""/><g>
<g>
<path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z" data-original="#000000" class="active-path" fill="#FFFFFF"/>
<path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z" data-original="#000000" class="active-path" fill="#FFFFFF"/>
</g>
</g></g> </svg>
Copy</button>
<span class="message">Copied!</span></center>
<script>const text = document.querySelector('.text');
const button = document.querySelector('.button');
const message = document.querySelector('.message');
button.onclick = function () {
// Select the text
text.select();
// Copy it
document.execCommand('copy');
// Remove focus from the input
text.blur();
// Show message
message.classList.add('active');
// Hide message after 2 seconds
setTimeout(function () {
message.classList.remove('active');
}, 2000);
};</script>METODE KEDUA
Metode ini kita akan memisahkan html css dan javascript ditempat berbeda.
Copy semua kode css dibawah dan letakan sebelum kode </style> atau ]]><b:skin>.
.text {
font-size: 14px;
padding: 3px;
}
.text,
.button {
font-size: 16px;
}
.button {
background-color: #068DB5;
color: white;
border: none;
border-radius: 3px;
padding: 5px;
outline: none;
float:center;
}
.button:active {
transform: translateY(1px);
}
.message {
opacity: 0;
transition: 0.5s;
}
.message.active {
opacity: 1;
} Copy semua kode javascript dibawah dan letakkan sebelum atau diatas kode </body>.
<script>const text = document.querySelector('.text');
const button = document.querySelector('.button');
const message = document.querySelector('.message');
button.onclick = function () {
// Select the text
text.select();
// Copy it
document.execCommand('copy');
// Remove focus from the input
text.blur();
// Show message
message.classList.add('active');
// Hide message after 2 seconds
setTimeout(function () {
message.classList.remove('active');
}, 2000);
};</script> Yang terakhir tinggal letakan kode html dibawah sesuai keinginan atau kebutuhan kalian.
<center>
<input class="text" type="text" value="Isi text sembarang" />
<button class="button" type="button"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 488.3 488.3" style="enable-background:new 0 0 488.3 488.3;" xml:space="preserve" width="512px" height="512px" class=""><g transform="matrix(0.9801 0 0 0.9801 4.85858 4.85858)"><script xmlns="" class="active-path" style=""/><g>
<g>
<path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z" data-original="#000000" class="active-path" fill="#FFFFFF"/>
<path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z" data-original="#000000" class="active-path" fill="#FFFFFF"/>
</g>
</g></g> </svg>
Copy</button>
<span class="message">Copied!</span></center> Ganti teks "isi teks sembarang" dengan teks yang kalian inginkan. Oh iya karena kode diatas menggunakan icon SVG jadi silahkan pasang dahulu kode material design icon, karena jika tidak icon tidak akan muncul. atau kalian bisa mengganti dengan icon dari font awesome, tinggal ganti saja pembuka <svg> sampai </svg>. atau jika tidak diberi icon juga tidak apa apa, tinggal hapus saja kodenya.
Baiklah itu dia cara membuat tombol copy text to clipboard diblogger. mungkin itu saja yang bisa saya sampaikan semoga bermanfaat, terimkasih sudah berkunjung sampai jumpa dinext artikel.
0 Comments