02/10/2020
Rumah Code

Javascript copy paste text

Mungkin temen temen ada yang bertanya tanya apakah dalam javascript itu dapat melakukan operasi copy paste ke clipboard. Nah itu lah yang akan rumah code bahas pada tutorial javascript kali ini. Jawaban nya adalah bisa, dalam javascript kita bisa melakukan operasi copy paste. Bagaimana cara melakukan operasi copy paste pada javascript? Simak tutorial nya di bawah ini.

Sebenarnya untuk membuat melakukan operasi copy string dengan menggunakan javascript sangatlah mudah cukup dengan menggunakan satu baris perintah saja kita dapat mengkopi sebuah string. Perhatikan perintah javascript copy di bawah ini

document.execCommand("copy");

namun yang menjadi masalah adalah apa yang akan di copy? Karena javascript hanya dapat mengcopy text atau string dari sebuah input yang dengan tipe tex atau text area. Solusinya adalah dengan cara mencopy dari salah satu elemet di atas. Biar jelas nya silahkan simak contoh javascript copy ci bawah ini.

Javascript Copy to clipboard

Contoh pertama yang akan saya berikan ini adalah contoh sederhana dari javascript copy to clipboard dengan menggunakan input dan text area.

Contoh 1 :

<!DOCTYPE html>
<html>
<body>
<h1>Contoh javascript copy to clipboard </h1>
<p></p>

<input type="text" value="Copy dari Input" id="CopyFromInput"><button onclick="jscopy1()">Copy From Input</button></br>
<textarea id="CopyFromTextArea" name="CopyFromTextArea" rows="4" cols="50">Copy dari Text area</textarea></br><button onclick="jscopy2()">Copy From Text Area</button>
<script>
function jscopy1() {
  var jsCopy = document.getElementById("CopyFromInput");
  var msg = "<h2>javascript copy element value to clipboard</h2><p>Text yang di copy adalah :";
  jsCopy.select();
  jsCopy.setSelectionRange(0, 99999)
  document.execCommand("copy");
  document.getElementById("PesanCopy").innerHTML = msg+jsCopy.value+'</p>';
}
function jscopy2() {
  var jsCopy = document.getElementById("CopyFromTextArea");
  var msg = "<h2>javascript copy text to clipboard</h2><p>Text yang di copy adalah :";
  jsCopy.select();
  jsCopy.setSelectionRange(0, 99999)
  document.execCommand("copy");
  document.getElementById("PesanCopy").innerHTML =msg+jsCopy.value+'</p>';
}
</script><br><br>
<div id="PesanCopy"></div>
</body>
</html>

Contoh script di atas adalah contoh mengcopy sebuah scrit dari sebuah element value dengan menggunakan javascript. Saya akan membuat script lain yang tujuan nya sama dengan contoh 1.

Contoh 2 :

<!DOCTYPE html>
<html>
<body>
<h1>Contoh javascript copy to clipboard </h1>
<p></p>

<input type="text" value="Copy dari Input" id="CopyFromInput"><button onclick="jscopy('CopyFromInput')">Copy From Input</button></br>
<textarea id="CopyFromTextArea" name="CopyFromTextArea" rows="4" cols="50">Copy dari Text area</textarea></br><button onclick="jscopy('CopyFromTextArea')">Copy From Text Area</button>
<script>
function jscopy(elementID) {
  var jsCopy = document.getElementById(elementID);
  var msg = "<h2>javascript copy element value to clipboard berdasarkan element id</h2><p>Text yang di copy adalah :";
  jsCopy.select();
  jsCopy.setSelectionRange(0, 99999)
  document.execCommand("copy");
  document.getElementById("PesanCopy").innerHTML = msg+jsCopy.value+'</p>';
}
</script><br><br>
<div id="PesanCopy"></div>
</body>
</html>

kedua contoh di atas adalah contoh yang mudah karena menggunakan element input atau text area. Sekarang bagaimana jika kita akan mencopy dari sebuah link atau selemnt html lainnya? Perhatikan contoh 3 di bawah ini

Contoh 3:

<!DOCTYPE html>
<html>
<body>
<h1 id='h1'>Contoh javascript copy to clipboard H</h1>
<p id='p'>Contoh javascript copy to clipboard P</p>
<a id="link" href="https://www.rumahcode.org">Rumahcode</a></br>
<button onclick="jscopy('h1')">Copy From H1</button>
<button onclick="jscopy('p')">Copy From P</button>
<button onclick="jscopy('link')">javascript copy text from link</button>
<button onclick="csclink('link')">javascript copy link</button>
<script>
function csclink(elementID){
var jc = document.getElementById(elementID).href;
cp(jc);
}
function jscopy(elementID){
var jc = document.getElementById(elementID).textContent;
cp(jc);
}
function cp(jc) {
   var el = document.createElement('textarea');
   el.value = jc;
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);  
   document.getElementById("PesanCopy").innerHTML = el.value;
  }
</script><br><br>
<div id="PesanCopy"></div>
</body>
</html>

pada contoh di atas saya telah melakukan opreasi copy dengan menggunakan fungsi get element by id sekarang kita tinggal membuat perintah untuk mempaste nya.

Javascript Paste

Script untuk mendapatkan nilai dari clipboard dan mempaste nya adalah

async function paste() {
  const pastetext = await navigator.clipboard.readText();
  var ta =  document.getElementById("pastetext");
  ta.innerHTML = pastetext;
}

pada script di atas kita akan mempaste nilai yang di dapatkan dari clipboard ke text area dengan id pastetext.

Javascript copy paste text

berikut ini adalah script lengkap dari javascript copy paste

<!DOCTYPE html>
<html>
<body>
<h1 id='h1'>Contoh javascript copy to clipboard H</h1>
<p id='p'>Contoh javascript copy to clipboard P</p>
<a id="link" href="https://www.rumahcode.org">Rumahcode</a></br>
<button onclick="jscopy('h1')">Copy From H1</button>
<button onclick="jscopy('p')">Copy From P</button>
<button onclick="jscopy('link')">javascript copy text from link</button>
<button onclick="csclink('link')">javascript copy link</button>
<script>
function csclink(elementID){
var jc = document.getElementById(elementID).href;
cp(jc);
}
function jscopy(elementID){
var jc = document.getElementById(elementID).textContent;
cp(jc);
}
function cp(jc) {
   var el = document.createElement('textarea');
   el.value = jc;
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);  
   paste();
  }
async function paste() {
  const pastetext = await navigator.clipboard.readText();
  var ta =  document.getElementById("pastetext");
  ta.innerHTML = pastetext;
}  
</script><br><br>
<div id="PesanCopy"></div>
<textarea id="pastetext" name="pastetext" rows="4" cols="50">Paste</textarea>
</body>
</html>