Cara Membuat Copy Paste Teks Menggunakan Javascript

Saat membuat halaman web dan aplikasi yang sudah mulai kompleks, terkadang kita ingin menambahkan fitur copy paste agar memungkinkan pengguna cukup mengklik tombol atau icon untuk menyalin teks daripada menyorot teks dan mengklik beberapa tombol di keyboard.

Fitur ini banyak digunakan ketika seseorang perlu menyalin kode aktivasi, kunci pemulihan, cuplikan kode, dan sebagainya. Kita juga dapat menambahkan fungsionalitas seperti peringatan atau teks di layar (seperti notifikasi) untuk memberi tahu pengguna bahwa teks telah disalin ke clipboard kita.

Berikut contoh kode copy paste menggunakan beberapa cara untuk bisa kita pakai.

Contoh 1:

HTML

<button onclick="useCopyToClipboard('Here is copy text for you! (Example No. 1)')" class="btn btn-dark">
  <em class="fas fa-copy"></em> Copy
</button>

Javascript

function useCopyToClipboard(text) {
  navigator.clipboard.writeText(text)
}

Contoh 2:

HTML

<div class="mb-3">
  <button class="btn btn-dark" onclick="copyPaste(this,'Here is copy text for you! (Example No. 2)')">
  <em class="fas fa-copy"></em> Copy</button>
</div>
<span class="as-tooltip__info as-tooltip__info--top text-success">Copied!</span>

Javascript

function copyPaste(elm, link) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(link)
  } else {
    const tmp = document.createElement('TEXTAREA');
    const focus = document.activeElement;
    tmp.value = link;
    document.body.appendChild(tmp);
    tmp.select();
    document.execCommand('copy');
    document.body.removeChild(tmp);
  }
            
  $(elm).addClass('as-tooltip')
  setTimeout(function() {
    $(elm).removeClass('as-tooltip')
  }, 2000)
}

SCSS

.as-tooltip {
  cursor: help;
  position: relative;
  display: inline-block;
  left: 3px;
  top: 0;

  &:hover {
    .as-tooltip__info {
      visibility: visible;
    }
  }

  &__info {
    font-size: 0.875rem;
    border-radius: 12px;
    visibility: hidden;
    display: inline-block;
    cursor: auto;
    width: 150px;
    padding: 0.75rem 1rem;
    color: #fff;
    background: #121212;
    position: absolute;
    margin-top: 8px;
    z-index: 2;
    word-wrap: break-word;
    text-align: left;

    &--top {
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);

      &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #121212;
      }
    }
  }
}

Contoh 3:

HTML

<div id="testCopy">
  <div class="as-copy-text d-flex align-items-center gap-2">
    <span id="myCopy">Here is copy text for you! (Example No. 3)</span>
    <button class="btn btn-dark d-flex align-items-center gap-2">
      <em class="fas fa-copy" data-toggle="tooltip" data-placement="top" title="Copy to Clipboard"></em> Copy
    </button>
  </div>
</div>

Javascript

$(function () {
  $('.as-copy-text').on('click', function () {
    let $tmp = $('<textarea id="as-copy-value"></textarea>')
    let $copyText = $(this).parent().find('span').text()
    $('#testCopy').append($tmp)
    $('#as-copy-value').val($copyText).select()
    document.execCommand('copy')
    $('#as-copy-value').remove()
    $(this).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle")
  })
  $('[data-toggle="tooltip"]').tooltip()
})

Contoh 4:

HTML

<button class="btn btn-dark" onclick="CopyIcon()" id="copy-button" title="Copied!"> 
  <em class="as-btn-copy fas fa-copy"></em>
  <span id="copy-value">Here is copy text for you! (Example No. 4)</span>
</button>

Javascript

function CopyIcon() {
  let $temp = $("<textarea>")
  $("body").append($temp)
  $temp.val($('#copy-value').text()).select()
  document.execCommand("copy")
  $temp.remove()

// Set Icon
let iconUrl = "https://burst.shopifycdn.com/photos/laptop-from-above.jpg?width=1850&format=pjpg&exif=1&iptc=1"
let $icon   = $(".as-btn-copy").get(0)
$icon.style.setProperty("--icon-url", iconUrl)

setTimeout(() => {
  $icon.style.setProperty("--icon-url", iconUrl.replace('check', 'copy'))
  $('#copy-button').tooltip('hide')
  }, 5000)
}

SCSS

.as-button-icon {
  --icon-url: url('https://burst.shopifycdn.com/photos/laptop-from-above.jpg?width=1850&format=pjpg&exif=1&iptc=1');
  position: relative;
  margin-right: 1.5rem;

  &::before {
    content: var(--icon-url);
    margin-left: 0.5rem;
    position: absolute;
    transition: all 1s;
   }
  }

Contoh 5:

HTNL

<div class="as-copy-wrapper d-flex gap-3">
  <span class="as-copy-text">
    <input type="text" value="Here is copy text for you! (Example No. 5)" readonly />
  </span>
  <button class="as-button-copy btn btn-dark"> <em class="fas fa-copy"></em> Copy</button>
  <div class="no-tooltip mt-2">
    <span class="text-success">Copied!</span>
  </div>
</div>

Javascript

$(function () {
  $('.as-button-copy').click(function (e) {
  e.preventDefault()
  var $this = $(this)
  var copy_text = $this.parent().find('input')
  var dummy = copy_text.select()
  document.execCommand('copy')

  $('.as-copy-text input').css({ 'backgroundColor': 'white', 'color': 'green' })
  $('.no-tooltip').hide()

  $this.parent().find('input').css({ 'backgroundColor': 'green', 'color': 'white', 'border': 'green' })
  $this.parents('.as-copy-wrapper').find('.no-tooltip').show()
  setTimeout(function () {
    $this.parents('.as-copy-wrapper').find('.no-tooltip').hide()
    }, 3000)
  })
})

SCSS

.as-copy-text {
 
 em {
  text-transform: capitalize;
 }
 
 input {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 1rem;
  padding: 0.5rem 1rem;
 }
}

.no-tooltip {
 display: none;
}

Pada artikel ini kita telah mempelajari cara menyalin teks ke clipboard dengan Javascript menggunakan beberapa cara tanpa harus berpikir rumit atau menginstal pustaka Javascript apa pun.

Untuk contoh code nya bisa dilihat di codepen

Terimakasih!