Cara Membuat Cut atau Copy Clipboard Menggunakan Javascript -

Hallo Sahabat Dumetschool berjumpa kembali di Website kursuswebdesign ,bagaimana kabar sahabat baik-baik dan tetap semangat mengexplore tentang dunia percodingan. Baiklah pada artikel ini saya akan membahas tentang cara membuat cut atau copy teks menggunakan javascript, sebenarnya dalam kasus ini tidak asing lagi buat sahabat yang sering mampir keluar masuk website e-commerce atau ke website lainnya agar bisa disalin teksnya. Saya ambil contoh nih waktu sahabat selesai pilih-pilih barang kesukaan tentu harus melakukan pembayaran dong, entah mau salin kode pembayaran atau kode discount yang tersedia. Supaya tidak berlama-lama lagi yuuuk ikutin pembahasan berikut.

Sahabat bisa langsung mengikuti langkah-langkah cara pembuatannya ketikan script dibawah ini:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Membuat Cut atau Copy Clipboard Dengan Javascript</title>
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<style type="text/css">
		.form-control{
			width: 50%;
			margin-top:10px;
		}
		.alert{
			width: 50%;
		}
		h5#salin{
			display: inline;
			margin-right: 15px;
			font-weight: 600;
		}
		h5#potong{
			display: inline;
			margin-left: 15px;
			font-weight: 600;
		}
	</style>

</head>
<body>

	<div class="container">
			<h1>Membuat Cut atau Copy Clipboard Dengan Javascript</h1>
		<div class="form-group">
				<textarea class="form-control" id="isi" placeholder="Ketikkan teks disini"></textarea>
		</div>
				
				<h5 id="salin" onclick="keyboard('copy')">Salin Teks</h5>
				<span style="font-style: italic">Atau</span>
				<h5 id="potong" onclick="keyboard('cut')">Potong Teks</h5>
				<textarea class="form-control" placeholder="Paste pada area ini......" ></textarea>
	</div>

	<script type="text/javascript">
		
		function keyboard(value){			
			var isi = document.getElementById('isi');
			isi.select();
			if(value == 'copy'){
				document.getElementById("salin").style.color = "blue";
				
				setTimeout(function(){
				document.getElementById("salin").style.color = "black";
				},1000)
				document.execCommand('copy');
			}else{
				document.getElementById("potong").style.color = "red";

				setTimeout(function(){					
				document.getElementById("potong").style.color = "black";
				},1000)
				document.execCommand('cut');				
				}
			}
			
	</script>
</body>
</html>

Pada Script diatas saya terdapat 2 ID yang dipakai yaitu salin dan potong serta menggunakan event onclick dengan function keyboard dapat dilihat pada gambar dibawah ini :

Sekarang Coba sahabat perhatikan gambar berikut ini

saat akan menyalin teks pada sebuah input maka akan berwarna biru dan

saat akan memotong teks pada sebuah input maka akan berwarna merah.

jadi saat sahabat sudah berhasil menyalin atau memotong teks langsung paste pada input dibawah nya.

Demikian pembahasan artikel tentang cara membuat cut atau copy teks menggunakan javascript, semoga bermanfaat dan selamat mencoba.

terima kasih

Cara Membuat Cut atau Copy Clipboard Menggunakan Javascript

Kategori