Cara Nonaktifkan Tombol Keyboard Tertentu dengan jQuery

1305Artikel Biralie Nugraha Updated

Jquery Wallpaper

Artikel kali ini masih merupakan lanjutan dari artikel Cara Disable Right Click dan Text Selection dengan jQuery.

Pada bagian ini, saya akan menjelaskan bagaimana cara menonaktifkan tombol tertentu di keyboard menggunakan jQuery.

Salah satu contoh penggunaan adalah ketika misalnya Anda ingin menonaktifkan tombol shortcut inspect element.

Dan metode ini merupakan pelengkap dari metode disable right click & text selection di artikel sebelumnya. Tujuan akhirnya yaitu untuk mencegah “pencurian” konten di web kita.

Secara umum, ada tiga tombol shortcut yang sering digunakan untuk membuka jendela inspect element, yaitu:

  • F12
  • CTRL + SHIFT + I
  • CTRL + SHIFT + J

Dengan cara yang sama, Anda pun dapat menonaktifkan tombol CTRL + A.

Syntax Dasar 

jQuery(document).keydown(function (event) {
  if (event.keyCode == 123) {
    Lakukan sesuatu...
  }
});

event.keyCode == 123 digunakan untuk menargetkan tombol tertentu pada keyboard. Angka 123 di sini bisa Anda ganti/sesuaikan karena setiap tombol pada keyboard itu memiliki keyCode nya masing-masing.

Daftar lengkapnya bisa Anda lihat di Daftar keyCode.

Selain event.keyCode , Anda dapat menggunakan event.ctrlKey untuk tombol CTRL, event.shiftKey untuk tombol SHIFT, dan event.altKey untuk tombol ALT.

Nonaktifkan Tombol F12

Sekarang kita akan coba nonaktifkan tombol F12. keyCode untuk tombol F12 adalah 123 sama seperti contoh kode di atas. Anda tinggal menambahkan return false; untuk menonaktifkannya.

jQuery(document).keydown(function (event) {
  if (event.keyCode == 123) {
    return false;
  }
});

Atau jika Anda ingin memunculkan peringatan saat user menekan tombol F12 tinggal tambahkan fungsi alert(); .

Jadi seperti ini:

jQuery(document).keydown(function (event) {
  if (event.keyCode == 123) {
    alert("Maaf, tombol F12 kami nonaktifkan...");
    return false;
  }
});

Nonaktifkan Tombol CTRL + A

Masih menggunakan syntax dasar di atas. Anda tinggal mengganti angka 123 dengan keyCode untuk tombol “a”.

jQuery(document).keydown(function (event) {
  if (event.keyCode == 65) {
    return false;
  }
});

Nonaktifkan Tombol CTRL + SHIFT + I

Gunakan event CTRL dan SHIFT secara bersamaan lalu tambahkan juga keyCode dari tombol “i”.

jQuery(document).keydown(function (event) {
  if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
    return false;
  }
});

Nonaktifkan Tombol CTRL + SHIFT + J

Masih sama, Anda tinggal mengganti keyCode “i” dengan “j”.

jQuery(document).keydown(function (event) {
  if (event.ctrlKey && event.shiftKey && event.keyCode == 74) {
    return false;
  }
});

Kombinasi Tombol CTRL + A, CTRL + SHIFT + I dan CTRL + SHIFT + J

Sekarang kita akan coba menggabungkan semuanya.

jQuery(document).keydown(function (event) {
  if ((event.keyCode == 123) || (event.ctrlKey && event.keyCode == 65) || (event.ctrlKey && event.shiftKey && event.keyCode == 73) || (event.ctrlKey && event.shiftKey && event.keyCode == 74)) {
    return false;
  }
});

Di sini saya menggunakan operator || yang berarti OR (atau).

Untuk memastikan agar kode tersebut dieksekusi setelah halaman web termuat sempurna, tambahkan:

jQuery(document).ready(function() {
   Kode jQuery di sini...
});

Contoh lengkapnya seperti ini:

jQuery(document).ready(function() {
  jQuery(document).keydown(function (event) {
    if ((event.keyCode == 123) || (event.ctrlKey && event.keyCode == 65) || (event.ctrlKey && event.shiftKey && event.keyCode == 73) || (event.ctrlKey && event.shiftKey && event.keyCode == 74)) {
      return false;
    }
  });
});

Selesai! Anda sudah berhasil menonaktifkan tombol F12, CTRL + A, CTRL + SHIFT + I, dan CTRL + SHIFT + J.

Update!

Sebaiknya gunakan properti which daripada keyCode. Lihat penjelasannya di sini dan di sini. Contoh:

jQuery(document).keydown(function (event) {
  if (event.which == 123) {
    Lakukan sesuatu...
  }
});
Shares