Bắt sự kiện bàn phím trong jQuery và javascript, sự kiện đơn và kép

Thảo luận trong 'Lập trình Javascript, js' bắt đầu bởi admin, 21/11/14.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,997
    Đã được thích:
    1,216
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bắt sự kiện bàn phím trong jQuery và javascript với sự kiện đơn và kép
    • Việc bắt sự kiện này cũng khá đơn giản, với JQuery.
    • VD: với phím ESC là 27, Enter 13,...
    • Để biết bảng mã ascii thì bạn vào xem bài sau: bảng mã ascii chuẩn.
    1. Sự bắt sự kiện bàn phím đơn trong JQuery.

    HTML:
    <script>
        $(function(){
          $('*').keyup(function(e){
              if(e.keyCode=='27'){
                alert('Bạn mới ấn phím ESC')
              }       
          })
        })
    </script>
    
    • Kết quả trả về khi người dùng ấn phím ESC 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(tên tùy chỉnh).
    • $('*') : 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() hoặc ta có thể đổi lại như $(document) hay $('html) đều có tác dụng như nhau.
    • Số 27 : là mã ASCII của phím ESC
    2.Bắt sự kiện khi người dùng ấn tổ hợp phím trong JQuery
    • VD: khi người dùng ấn tổ hợp phím CTRL + Q
    HTML:
        var 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=='81'){
                    alert('Bạn vừa mới ấn tổ hợp CTRL + Q')
                    checkCtrl=false
                }
            }
        })
    
    • Kết quả trả về khi người dùng ấn tổ hợp phím CTRL và phím Q cùng 1 lúc.
    • Đầ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 Q, không thì ngược lại.
    • Với phím CRTL có ASCII là 17 và phím A có mã ASCII là 81.
    3.Bắt sự kiện với javascript.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <script language="JavaScript">
    function disableEnterKey(e)
    {
         var key;
    
         if(window.event)
              key = window.event.keyCode;     //Trình duyệt IE
         else
              key = e.which;     //trình duyệt firefox
    
         if(key == 13)
              return false;
         else
              return true;
    }
    </script>
    <body>
    <form id="form1" name="form1" method="post" action="xuly.php">
    nhap ho ten
    <input type="text' name="phimcanbat" onKeyPress="return disableEnterKey(event)">
    <input name="submit" type="submit" value="Submit" />
    </form>
    </body>
    </html>
    
    Ngoài ra bạn có thể xem thêm các sự kiện trong javascript tại đây.
     
    Cảm ơn đã xem bài:

    Bắt sự kiện bàn phím trong jQuery và javascript, sự kiện đơn và kép

    Last edited by a moderator: 9/4/16