Cara Membuat Tombol Copy dengan Javascript

Cara Membuat Tombol Fungsi Copy Dengan Javascript – Hallo semuanya, pada arikel kali ini kita akan membahas materi tentang javascript, sekarang ini pasti kalian pernah mengunjungi website sebuah framework, tutorial, ataupun dokumentasi, diantara website tersebut pasti ada tombol pada baris kode yang berfungsi untuk melakukan penyalinan kode yang terlihat atau click to copy. Contoh seperti saat kalian mengunjungi halaman dokumentasi bootstrap, kalian akan menemukan pada setiap baris kode dokumentasi pasti ada tombol copy yang berfungsi untuk menyalin kode contoh yang ada disana.
Pada artikel kali ini kita akan membahas tentang bagaimana cara membuat tombol fungsi copy dengan javascript. Pertama kita akan membuat sebuah struktur html sederhana yang berisi input dan tombol biasa yang akan kita berikan fungsi javascript di dalamnya.


<input type="text" value="Hello World" id="myInput">

<div class="tooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
  <span class="tooltiptext" id="myTooltip">Salin isi teks</span>
  Salin
  </button>
</div>

Selanjutnya kita akan berikan fungsi javascript pada tombol tersebut.

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");
 
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Tersalin " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Salin isi teks";
}


Baiklah, sekarang kita akan buat css untuk memberikan posisi pada tooltip yang kita buat

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Dengan begitu kita sudah bisa membuat tombol klik untuk salin. Cukup mudah bukan, demikian artikel kali ini yang membahas tentang cara membuat tombol copy dengan javascript, semoga bisa jadi referensi kalian ya, sampai jumpa di artikel lainnya

 

14 September 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat