Hướng dẫn Sự Kiện Bàn Phím Đơn Và Phím Kép Với JQuery

[Admin]

Cũng tương tự như đối với javascript thuần jQuery thực sự đơn giản và dễ hiểu hơn rất nhiều.
Hum nay mình hướng dẫn bắt sự kiện bàn phím đơn(ấn 1 phím ) và bàn phím kép (tổ hợp phím) với jQuery.

Với cách làm bắt sự kiện trên bạn có thể làm đc rất nhiều ứng dụng trên Web của mình như: Làm phím chức năng tắt trên Web, chặn CTRL_U xem nguồn trang web chẳng hạn...v.v... tự phát triển lên nhé.
Demo: http://jsbin.com/agazan/4/

Đầu tiên chúng ta cũng cần phải biết mã ASCII của các ký tự trên bàn phím thì mới làm dc.
http://www.webonweboff.com/tips/js/event_key_codes.aspx
Bạn vào đây để Test mà ASCII của ký tự cần biết.
Ví dụ : Phím Enter là 13, ESC là 27, phím Tab là 9......
Chúng ta cũng có thể tự viết ra 1 code đơn giản như thế cho phép xuất ra ASCII như thế
Để sự jQuery thì hãy nhớ khai báo sử dụng thư viện nhé,chèn code này vào head rồi ta tiếp tục.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

1/ Sự bắt sự kiện bàn phím đơn

<script>
    $(function(){
      $('*').keyup(function(e){
          if(e.keyCode=='65'){
            alert('Bạn mới ấn phím A')
          }         
      })
    })
  </script>

Kết quả là sẽ xuất thông báo khi ta ấn chữ A trên bàn phím.

• keyup(e): sự kiện khi người dùng ấn 1 phím rồi thả lên.e là tham số truyền vào để tương tác với sự kiện, bạn đặt tên là gì cũng đc.
• $('*') : là ảnh hưởng sử kiện lên tất cả các đổi tượng, nghĩa là tất cả các đối tượng chịu ảnh hưởng của sự kiện keyup() ở trên kia.Hoặc ta có thể đổi lại như $(document) hay $('html) đều có tác dụng như nhau.
• 65 : là mã ASCII của phím A

          if(e.keyCode=='65'){
            alert('Bạn mới ấn phím A')
          }

• nếu người dùng ấn phím có mã ASCII là 65 thì cho xuất hiện thông báo.

Vậy là quá đơn giản dễ hiểu phải không.
2/Bắt sự kiện với tổ hợp phím:Để đơn giản thì mình sẽ hướng dẫn với tổ hợp phím 2 phím thôi( Ví dụ CTRL_A)

checkCtrl=false
    $('*').keydown(function(e){
        if(e.keyCode=='17'){
            checkCtrl=true
        }
    }).keyup(function(ev){
        if(ev.keyCode=='17'){
            checkCtrl=false
        }
    }).keydown(function(event){
        if(checkCtrl){
            if(event.keyCode=='65'){
                alert('Bạn vừa mới ấn tổ hợp CTRL_A')
                checkCtrl=false
            }
        }
    })

• Đầu tiên mình tạo ra 1 biến checkCtrl giá trị false ban đầu: BIến này có chức năng kiểm tra rằng phím CTRL dã đc ấn chưa, nếu rồi cho ấn tiếp phím A, không thì ngược lại.
• Với phím CRTL có ASCII là 17 và phím A có mã ASCII là 65
• Ban đầu nếu người dùng ấn xuống(k thả lên) sự kiện keydown: Nếu là phím CTRL thì cho biến checkCtrl=true

$('*').keydown(function(e){
        if(e.keyCode=='17'){
            checkCtrl=true
        }
    })

• Sau đó kiểm tra nếu người dùng có thả phím CTRL lên thì cho ngay checkCtrl=false

$('*').keyup(function(ev){
        if(ev.keyCode=='17'){
            checkCtrl=false
        }
    })

còn nếu k thả CTRL thì giá trị checkCtrl=true vẫn giữ nguyên.

• Cuối cùng

$('*').keydown(function(event){
        if(checkCtrl){
            if(event.keyCode=='65'){
                alert('Bạn vừa mới ấn tổ hợp phim CTRL_A')
                checkCtrl=false
            }
        }
    })

Nếu người dùng ấn tiếp phím khác(keydown) nếu mà checkCtrl==true ( nghĩa là CTRL đang bị ấn) mà lại tiếp tục ấn tiếp phím có mã ASCII là 65 thì cho xuất hiện thông báo, còn nếu CTRL đã thả lên(checkCtrl=false) thì có ấn phím mã ASCII 65 cũng k có tác dụng.
OK vậy là xong ... dễ hiểu thì Thanks cái nha.

Demo chặn CTRL_U trên Diễn Đàn của mình : svphuyen.com/forum.php
Việc phát triển thêm chức năng là tùy các bạn.. mục đích bài viết là để bạn bắt đc sự kiện bàn phím một cách đơn giản.. so với việc dùng javascript thuần.

Mình thấy có một số bạn đã từng hỏi có chặn đc tổ hợp phím CTRL_U không mà chưa có câu trả lời , và đây là câu trả lời là đc nhưng k đồng nghĩa với việc chặn đc xem nguồn nhé ;-D

Nguồn svphuyen.com ​