Nonaktifkan klik kanan mouse, potong, salin, tempel dengan JavaScript atau jQuery

Programming

oleh Vinci terakhir diubah pada 14 Agustus 2022.

Sebelum mempelajari cara menonaktifkan cut, copy, paste, dan klik kanan di JavaScript, pertama-tama kita perlu memahami alasannya.

Mengapa kami membutuhkan ini untuk menyalin dan memanipulasi konten yang ditampilkan di klien. Ini memungkinkan pengguna untuk, misalnya, melakukan hal berikut:

  1. Hapus konten situs yang dilindungi hak cipta dengan menyalin dan menempel.
  2. Simpan file media dengan mengklik kanan dan menyimpan aset.

Kami menerapkan penonaktifan ini menggunakan langkah-langkah berikut. Dua yang pertama adalah wajib dan yang ketiga adalah opsional.

  1. Dengarkan jenis acara potong, salin, tempel, dan klik kanan.
  2. Hindari perilaku default dengan merujuk ke Peristiwa Tujuan – objek.
  3. Otentikasi pengguna dengan menampilkan pesan peringatan [optional step].

Tampilkan demo

Nonaktifkan potong salin tempel klik kanan

Contoh 1 – Nonaktifkan potong, salin, tempel, dan klik kanan mouse

JavaScript ini menonaktifkan pemotongan, penyalinan, penempelan, dan klik kanan pada konten area teks.

Ini mendefinisikan panggilan balik pada acara siap dokumen. Ini menggunakan jQuery.

Dalam panggilan ini, ia mendengarkan permintaan potong, salin, tempel, dan klik kanan mouse.

Skrip ini mencegah perilaku default saat permintaan ini diajukan. Oleh karena itu, ia menghentikan tindakan yang diharapkan berdasarkan cut, copy, dan permintaan lain yang disebutkan di atas.

$(document).ready(function() {
	$('textarea').on("cut", function(e) {
		e.preventDefault();
		alertUser('Cut');
	});
	$('textarea').on("copy", function(e) {
		e.preventDefault();
		alertUser('Copy');
	});
	$('textarea').on("paste", function(e) {
		e.preventDefault();
		alertUser('Paste');
	});

	$("textarea").on("contextmenu", function(e) {
		e.preventDefault();
		alertUser('Mouse right click');
	});
});

function alertUser(message) {
	$("#phppot-message").text(message + ' is disabled.');
	$("#phppot-message").show();
}

HTML dengan Textarea dan Alert Box

HTML ini memiliki area teks. JavaScript menargetkan konten area teks ini untuk menonaktifkan pemotongan, penyalinan, dan acara lainnya.

Setelah menonaktifkan perilaku default, UI harus memberi tahu pengguna dengan menampilkan pesan.

Oleh karena itu, ini berisi kotak peringatan HTML untuk menampilkan bilah merah dengan pesan kesalahan terkait untuk memberi tahu pengguna.

Ini termasuk perpustakaan jQuery dengan URL CDN. Tempatkan skrip di atas di sebelah jQuery include lalu jalankan contohnya.

Dapat diunduh di akhir artikel ini, termasuk contoh pekerjaan lengkap.

<!DOCTYPE html>
<html>
<head>
<title>Disable mouse right click, cut, copy, paste with JavaScript or
    jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="https://phppot.com/javascript/disable-mouse-right-click-cut-copy-paste/css/style.css" />
<link rel="stylesheet" type="text/css" href="css/form.css" />
<style>
#phppot-message {
    display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"></script>

</head>

<body>
    <div class="phppot-container">
        <h2>Disable mouse right click, cut, copy, paste</h2>
        <textarea name="notes" class="full-width" rows="5"></textarea>
        <div id="phppot-message" class="error"></div>
    </div>
</body>
</html>

Contoh 2 – Versi tipis menggunakan jQuery

Contoh ini adalah versi tipis dari yang di atas. Itu juga menggunakan perpustakaan jQuery untuk menonaktifkan acara potong, salin tempel, dan klik kanan.

Ini menonaktifkan semua acara. Alih-alih membuat pendengar eksklusif untuk setiap acara, ia memiliki satu baris kode.

Metode ini memiliki sedikit kelemahan. Artinya, ini menunjukkan pesan umum saat menghentikan acara potong, salin, tempel, dan klik kanan apa pun.

Pada metode pertama, pesan konfirmasi sangat spesifik. Pesan ini memberikan kejelasan lebih lanjut tentang apa yang dipicu dan apa yang dinonaktifkan dan dicegah.

Namun, keuntungan dari contoh di bawah ini adalah terlalu tipis untuk dimasukkan sebagai fitur sisi klien dalam aplikasi kita.

$(document).ready(function() {
	$('textarea').bind('cut copy paste contextmenu', function(e) {
		e.preventDefault();
		$("#phppot-message").text('The Cut copy paste and the mouse right-click are disabled.');
		$("#phppot-message").show();
	});
});

Contoh 3 – Untuk pecinta JavaScript

Ingin solusi JavaScript murni untuk contoh ini? Script berikut akan melakukan ini untuk menonaktifkan cut, copy, paste dan klik kanan.

Itu tidak memiliki jQuery atau kerangka kerja atau pustaka sisi klien lainnya. Saya percaya bahwa kerangka kerja adalah untuk mencapai volume efek, aplikasi, dan lainnya.

Jika aplikasi akan memiliki persyaratan tipis, maka tidak diperlukan kerangka kerja.

HTML dengan properti onCut, onCopy, onPaste, dan onContextMenu

Bidang Textarea dalam HTML di bawah ini memiliki atribut panggilan balik berikut.

  • dipotong
  • DiSalin
  • sedang menempel
  • padaContextMenu

Dalam acara ini, itu disebut nonaktifkanAksi(). Objek acara mengembalikan string yang menentukan peristiwa yang terjadi.

<textarea name="notes" class="full-width" rows="5"
    onCut="disableAction(event, 'Cut');"
    onCopy="disableAction(event, 'Copy');"
    onpaste="disableAction(event, 'Paste');"
    oncontextmenu="disableAction(event, 'Right click');"></textarea>
<div id="phppot-message" class="error"></div>

Fungsi JavaScript dipanggil dengan cara potong, salin, tempel, dan klik kanan

Dalam kode JavaScript, ia membaca jenis acara dan menonaktifkannya.

event.preventDefault() adalah langkah umum dalam semua contoh untuk menonaktifkan cut, copy, paste, dan klik kanan.

function disableAction(event, action) {
	event.preventDefault();
	document.getElementById("phppot-message").innerText = action + ' is disabled.';
	document.getElementById("phppot-message").style.display = 'block';
}

penafian

Acara seperti keyboard atau mouse diMouseDown() Atau diKeyDown Ini terbelakang dalam kinerja dan juga memiliki kekurangan. Beberapa di antaranya adalah sebagai berikut.

  1. Kunci dapat dikonfigurasi dan disesuaikan. Oleh karena itu, penanganan acara tidak dapat diandalkan sesuai dengan kode kunci.
  2. Dengan mengklik kanan mouse, menu sebelum layar ditampilkan diMouseDown() Menerima dan memeriksa kode kunci. Jadi, menonaktifkan klik kanan mouse menggunakan gagal diMouseDown() Jawab panggilannya
  3. Yang terpenting, pengguna dapat dengan mudah menonaktifkan JavaScript di browser mereka dan menggunakan situs web.

Tampilkan DemoUnduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.