Cara Membuat Fitur Copy Text Dengan Javascript

Kali ini saya kan membahas tentang Cara Membuat Fitur Copy Text Dengan Javascript. Yang mana pada fitur ini dapat menyalin sebuah text atau paragraf dengan hanya mengklik tombolnya saja. Metode yang akan saya gunakan adalah document.execCommand(), namun metode ini tidak support untuk IE8 and earlier. 

Cara Membuat Fitur Copy Text Dengan Javascript disini saya akan membuat  2 buah input form dengan textarea dan satu tombol input. Dimana input textarea yang satu berisi sebuah paragraf dan input area satu lagi kosong. Berikut ini adalah struktur htmlnya ya teman-teman.

<!DOCTYPE html>
<html>
<head>
	<title>Cara Membuat Fitur Copy Text Dengan Javascript</title>
</head>
<body>

	<h1>Cara Membuat Fitur Copy Text Dengan Javascript</h1>
	<button onclick="myFunction()">Salin Text</button><br>
	<textarea name="" id="myInput" cols="35" rows="10" value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged" disabled="disabled">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</textarea>
	<textarea name="" cols="35" rows="10" id="result"></textarea>
</body>
</html>

Jika sudah selesai maka tampilannya akan seperti gambar di bawah ini.

Dan langkah selanjutnya  kita akan membuat copy text atau salin text dengan javascript seperti pada script di bawah ini.

	<script>
	function myFunction() {
	  var salin = document.getElementById("myInput");
	  salin.select();
	  document.execCommand("copy");
	  alert("Text Berhasil di Salin");
	  var result = document.getElementById("result");
	  result.innerText = salin.value

	}
	</script>

Jika teman-teman perhatikan script saya di atas maka flownya di mulai saya melakukan selection elemen dengan nama #myInput lalu disambung dengan method select() untuk mengambil value atau nilai dari inputnya. yang nanti akan bisa kita paste.

Dan ketika saya menekan tombol salin text maka akan keluar sebuah informasi dari alert bahwa text berhasil di salin. Dan textarea akan berisi sebuah paragraf persis seperti paragraf yang ada di textarea sebelumnya.

Dan jika teman-teman buka di browser maka akan tampak seperti pada gambar di bawah ini.

Demikian artikel tentang cara Cara Membuat Fitur Copy Text Dengan Javascript. Semoga dapat bermanfaat dan selamat mencoba.