Sự kiện keypress() trong jQuery

1) Sự kiện keypress() trong jQuery

- Sự kiện keypress() xảy ra khi một phím được nhấn xuống.

- Ví dụ: Bạn hãy thử nhập một nội dung gì đó vào phần tử <textarea> bên dưới.

- Ví dụ: Bạn hãy thử nhấn một phím nào đó vào phần tử <textarea> bên dưới và giữ nguyên.

2) Điểm giống nhau & khác nhau giữa keypress() & keydown()

- Điểm giống: Cả hai sự kiện này đều xảy ra khi một phím được nhấn xuống.

- Điểm khác:

• Sự kiện keydown() xảy ra với hầu hết tất cả các phím bấm.
• Sự kiện keypress() không xảy ra với hầu hết tất cả các phím bấm, điển hình là khi bạn bấm vào các phím như tab caps lock shift ctrl alt esc backspace thì sẽ không xảy ra sự kiện keypress().
• Một điểm khác biệt nữa là khi phần tử được thiết lập sự kiện keypress() lẫn keydown(), nếu ta bấm các phím mà cả hai sự kiện đều xảy ra thì sự kiện keypress() sẽ được ưu tiên hơn.

- Ví dụ: Phần tử <textarea> bên dưới được thiết lập cả sự kiện keypress() lẫn keydown(). Nếu sự kiện keypress() xảy ra thì nền của nó sẽ chuyển sang màu xanh, nếu sự kiện keydown() xảy ra thì nền của nó sẽ chuyển sang màu đỏ.

- Gợi ý: Khi bấm các phím thông thường thì sự kiện keypress() sẽ được ưu tiên hơn, vì vậy nền của textarea sẽ được chuyển sang màu xanh. Bạn hãy thử bấm vào textarea bên dưới các phím thông thường rồi sau đó bấm các phím mà sự kiện keypress() không xảy ra, để thấy được sự khác biệt giữa hai sự kiện này.

3) Cách sử dụng sự kiện keypress() trong jQuery

- Có hai trường hợp sử dụng sự kiện keypress():

- Trường hợp 1: Khi sự kiện keypress() xảy ra thì một chức năng sẽ được thực thi:

$(selector).keypress(function(){
    //đoạn mã sẽ được thực thi khi sự kiện keypress() xảy ra
})

- Trường hợp 2: Kích hoạt sự kiện keypress() cho một phần tử:

$(selector).keypress();

4) Một số ví dụ

<script>
    $(document).ready(function(){
        $("textarea").keypress(function(){
            $(this).css("background-color","yellow");
        });
   });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("textarea").keypress();
        });
    });
</script>