Cara Disable Right Click dan Text Selection dengan jQuery

Cara Disable Right Click Dan Text Selection Dengan Jquery

Pembahasan kali ini cukup menarik menurut saya. Isu tentang “pencurian konten” di internet selalu menjadi hal yang menarik untuk dibahas, terutama di kalangan blogger.

Dan wajarkah kita sebagai blogger khawatir dengan hal itu? Jawabannya bisa ya, bisa juga tidak. Akan saya bahas ini diakhir.

Cara Umum dalam Mencegah Pencurian Konten Web

Cara-cara umum yang sering dipraktikkan untuk mencegah pencurian konten adalah dengan menonaktifkan fungsi klik kanan pada mouse dan juga fungsi seleksi teks/tulisan.

Apakah cara ini efektif?

Ya, bagi mereka yang tidak terlalu paham dengan cara kerja Javascript, tapi tidak bagi mereka yang paham dengan hal itu.

Artinya, cara tersebut masih bisa diakali, tapi jangan khawatir karena di sini saya tidak akan menjelaskan bagaimana cara mengakali itu.

Ada banyak cara untuk menonaktifkan kedua fungsi tersebut (klik kanan & seleksi teks), tergantung mau pakai yang mana.

Bagi pengguna blogspot saya tidak tahu biasanya pakai cara apa, tapi bagi pengguna WordPress biasanya mereka menggunakan plugin.

Tapi untuk saya, saya lebih suka cara-cara sederhana. Untuk apa pakai banyak skrip atau plugin kalau hasilnya bisa dicapai hanya dengan 2-3 baris kode saja. Betul?

Nah, cara yang paling sederhana menurut saya adalah dengan menggunakan jQuery.

Cara Nonaktifkan Fungsi Klik Kanan dan Seleksi Tulisan dengan jQuery

Syarat untuk dapat menerapkan cara ini adalah Anda sudah mengerti di mana harus menyimpan kode jQuery di situs Anda.

Bagi pengguna WordPress, di setiap tema yang Anda pakai biasanya ada folder khusus untuk menyiman file-file javascript (js).

Masukkan kode jQuery ini di salah satu file javascript yang ada di dalam folder js tersebut. Dan sebaiknya Anda menggunakan child theme.

Atau bisa juga menambahkannya di header. Contohnya seperti ini:

<head>
  <script type="text/javascript">
       Kode jQuery di sini...
  </script>
</head>

Nonaktifkan Klik Kanan dengan jQuery

Berikut kodenya:

jQuery('body').on('contextmenu', function(e){ 
  return false; 
});

Dalam contoh di atas saya menggunakan selector body karena memang saya ingin menargetkan semua element yang ada di dalam tag body.

Jika Anda ingin menonaktifkan klik kanan di area tertentu, tinggal ganti selector body dengan class atau id dari area yang dimaksud.

Anda pun masih bisa memodifikasi kode di atas. Misal, Anda ingin ketika orang menekan klik kanan muncul peringatan berupa kotak dialog berisi teks/tulisan.

Mudah, tinggal tambahkan fungsi alert();

Jadi kodenya seperti ini:

jQuery('body').on('contextmenu', function(e){ 
  alert("Maaf, fungsi klik kanan kami nonaktifkan...");  
  return false; 
});

Nanti hasilnya seperti ini:

Cara Disable Right Click Dan Text Selection Dengan Jquery 1

Modifikasi lain adalah ketika misalnya Anda ingin menonaktifkan fungsi klik kanan hanya pada konten berupa gambar. Tinggal tambahkan selector img setelah contextmenu.

Jadi seperti ini:

jQuery('body').on('contextmenu', 'img', function(e){ 
  alert("Maaf, fungsi klik kanan kami nonaktifkan..."); 
  return false; 
});

Atau ganti selector img dengan p jika Anda ingin menerapkan fungsi tersebut hanya pada konten paragraf. Pokoknya silakan modifikasi sesuai kebutuhan.

Jika Anda ingin menyertakan konten gambar dalam kotak alert meskipun menurut saya tulisan pun sudah cukup, maka Anda perlu menggunakan jQuery UI dialog. Silakan pelajari langsung di situsnya.

Nonaktifkan Fungsi Seleksi Teks dengan jQuery

Tak lengkap jika Anda hanya menonaktifkan fungsi klik kanan tanpa menonaktifkan fungsi seleksi teks. Karena orang masih bisa menyalin tulisan Anda dengan cara menekan CTRL + C.

Berikut kodenya:

jQuery(document).bind('selectstart dragstart', function(e) {
  e.preventDefault();
  return false;
});

Empat baris kode di atas sudah cukup jika tujuan Anda hanya ingin menonaktifkan fungsi seleksi teks. Tidak perlu menggunakan plugin yang justru banyak menyertakan skrip-skrip yang tidak perlu.

Apakah kode di atas masih bisa dimodifikasi? Tentu saja!

Jika Anda sudah paham dengan penjelasan kode pertama di atas, maka tidak sulit untuk memodifikasi kode yang ini.

Dalam contoh kode di atas, saya menggunakan selector document, dan sebetulnya dengan menggunakan selector body pun sudah bisa bekerja dengan baik hampir di seluruh bagian website saya seperti halnya kode pertama di atas.

Intinya, selector ini bisa Anda ubah atau sesuaikan sesuai keperluan. Jika Anda hanya ingin menerapkan fungsi tersebut di area tertentu tinggal gunakan selector class atau id.

Ingin memunculkan peringatan saat pengguna mencoba menyeleksi teks/tulisan? Caranya masih sama, tambahkan fungsi alert();.

Kodenya jadi seperti ini:

jQuery(document).bind('selectstart dragstart', function(e) {
  e.preventDefault();
  alert("Maaf, fungsi seleksi teks kami nonaktifkan...");
  return false;
});

Nanti hasilnya seperti ini:

Cara Disable Right Click Dan Text Selection Dengan Jquery 2

Selesai! Beberapa baris kode jQuery di atas sudah cukup ampuh dalam mencegah pencurian konten di situs Anda.

Nonaktifkan Fungsi Seleksi Teks dengan CSS

Khusus untuk fungsi seleksi teks, ada cara yang lebih sederhana lagi untuk menonaktifkannya, yaitu dengan menggunakan CSS.

Berikut kodenya:

body {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

Dengan begitu, semua elemen yang berada di dalam tag body tidak dapat diseleksi dengan kursor.

<head>
</head>
<body>
  Semua elemen yang ada di sini tidak dapat diseleksi dengan kursor mouse...
</body>

Dengan cara ini, seleksi teks menggunakan tombol CTRL + A juga tidak dimungkinkan. Tapi bagaimana jika user mencobanya melalui inspect element? Ya tetap bisa!

Mereka buka inspect element lalu mencari properti CSS di atas dan menonaktifkannya. Saat itu juga kode di atas sudah tidak lagi berfungsi melindungi konten Anda.

Memang tidak ada cara yang 100% efektif, tapi setidaknya kita bisa membuat user harus bersusah payah terlebih dahulu jika ingin menyalin tulisan kita, itu pun jika mereka mengerti bagaimana cara melakukannya.

Seperti yang kita tahu, fungsi inspect element ini bisa diakses dengan berbagai cara selain dengan klik kanan, salah satunya melalui kombinasi tombol keyboard.

Baca artikel ini:

[pg_posts id=”14959″ posts_per_page=”1″]

Perlu atau Tidaknya Menerapkan Cara-Cara di Atas

Perlu diketahui bahwa untuk saat ini belum ada cara yang 100% efektif/ampuh dalam mencegah pencurian konten.

Semua cara yang tersedia masih bisa diakali atau katakanlah di bypass. Sekalipun Anda menonaktifkan kedua fungsi di atas (klik kanan & seleksi teks), orang masih bisa menyalin konten Anda dengan cara mengetik ulang.

Jadi, sekali konten Anda dipublikasikan untuk umum maka orang sudah bisa menjiplak konten Anda dengan mudah, meskipun itu mengharuskan mereka untuk mengetiknya ulang.

Dari sini Anda lah yang menilai, kira-kira perlu atau tidak menerapkan cara-cara di atas setelah Anda tahu bahwa cara-cara tersebut masih bisa diakali.

Satu lagi, tidak sedikit blogger yang menerapkan penggunaan watermark pada setiap gambar di blog mereka. Apakah ini perlu?

Jawabannya YA jika Anda seorang blogger traveller atau blog yang menampilkan konten berupa gambar hasil karya Anda sendiri.

Atau katakanlah Anda seorang fotografer, maka silakan menggunakan watermark sebagai tanda bahwa konten tersebut sepenuhnya milik Anda dan tidak boleh ada orang lain yang menggunakannya tanpa seizin Anda.

Tapi jika Anda masih menggunakan gambar yang ada di Google terus Anda tempel watermark, kira-kira wajar atau tidak?

Kalau kata saya sih itu orang lieurrr. Maaf kalau ada yang tersinggung, tapi saya harap Anda sadar bahwa penggunaan watermark yang tepat bukan seperti itu.

Bukan Anda searching gambar di google, edit-edit sedikit, dimasukkan ke blog sendiri dan dipasangi watermark.

Thanks.

Shares
Please Login, Register or comment as Guest.
Subscribe
Pilihan:
guest
0 Comments
Inline Feedbacks
View all comments