JavaScript: onKeyPress, onKeyDown, onKeyUp

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Tổng quan

Các hành động của người dụng đối với bàn phím có thể được nhận diện trong JavaScript. Điều này rất hữu dụng, ví dụ như một chương trình game trong đó bàn phím là một đầu vào và phải xác định hành động tiếp theo. Các sự kiện onKeyPress, onKeyDown và onKeyUp được kích hoạt khi người dùng nhấn một phím bất kỳ trên bàn phím rồi nhả ra. Sự kiện onKeyPress là sự kiện kết hợp của hai hành động: sau khi nhấn phím trên bàn phím xuống thì sự kiện được kích hoạt ngay tại lúc bạn nhả phím ra. Sự kiện onKeyDown được kích hoạt khi bạn nhấn một phím nào đó xuống và sau đó nhả phím ra (onKeyUp). onKeyDown và onKeyPress sẽ liện tục được kích hoạt nếu người dùng nhấn phím xuống mà không nhả ra. Còn sự kiện onKeyUp sẽ được kích hoạt khi bạn nhả phím ra. Một số trình duyệt có thể có những cách xử lý sự kiện bàn phím khác nhau.

Ví dụ:

Ví dụ về sự kiện onKeyPress:

    <html>

    <head>

    <title>Key Events</title>

    <meta charset="utf-8">

    </head>

1   <body bgcolor="yellow" onKeyPress="

2       if(navigator.appName=='Netscape')

3          alert('Phím bạn đã nhấn có mã ASCII là ' + event.which +

4              ', và là phím ' + String.fromCharCode(event.which))

         else

5          alert('Phím bạn đã nhấn có mã ASCII là ' + event.keyCode +

                ', và là phím ' + String.fromCharCode(event.keyCode))"

    <font face = "verdana">

    <b>Nhấn một phím bất ký trên bàn phím xuống và quan sát hiện tượng xảy ra!</b>

    </body>

    </html>

 

GIẢI THÍCH

1. Thẻ <body> được gán một sự kiện là onKeyPress. Nếu người dùng nhấn một phím bất kỳ trên bàn phím xuống tại trang web hiện thời thì phương thức alert() sẽ được kích hoạt và bạn sẽ thấy một thông báo xuất hiện và hiển thị phím bạn đã nhấn.

2. Trước tiên là ta check xem trình duyệt có phải là Netscape hay không. Netscape và IE sử dụng các thuộc tính khác nhau để mô tả giá trị của phím được nhấn.

3. Thuộc tính của đối tượng event mô tả giá trị ASCII của phím được nhấn.

4. Phương thức chuyển giá trị ASCII của phím được nhấn sang dạng ký tự, chẳng hạn giá trị ASCII là 65 thì ký tự tương ứng là 'A'.

5. Nếu trình duyệt không phải là Netscape (IE chẳng hạn) thì sẽ có cách thức riêng. Các trình duyệt khác sử dụng thuộc tính event.keyCode để thể hiện giá trị của phím được nhấn.

Ví dụ về sự kiện onKeyDown và onKeyUp:

    <html>

    <head>
    <title>onKeyDown & onKeyUp</title>
    <meta charset="utf-8">
    </head>

    <body bgcolor="white"><font face="arial">

    <h2 align='center'>onKeyUp và onKeyDown</h2>

    <h3>

    <br>Một mũi tên đi xuống màu <font color="green">green</font> sẽ xuất hiện khi bạn focus vào text field và nhấn một phím xuống để điền dữ liệu<br>và một mũi tên đi lên sẽ xuất hiện khi bạn nhả phím đó ra.<br><br>

1   <form>

        Xin mời nhập liệu:

2       <input type="text" size=10

3       onKeyDown="document.Arrow.src= 'http://v1study.com/public/images/article/green_globe_down_arrow_557.jpg'"

4       onKeyUp="document.Arrow.src= 'http://v1study.com/public/images/article/green_globe_up_arrow_560.jpg'">

        <input type=reset value="reset">

    </form>

5   <img src="Nguồn_ảnh" name="Arrow">

    </body>

    </html>

 

GIẢI THÍCH

1. Điểm bắt đầu của form.

2. Kiểu của input là textbox và chứa được tối đa 10 ký tự.

3. Sự kiện onKeyDown được kích hoạt khi người dùng nhấn một phím nào đó xuống textbox để điền dữ liệu, khi đó nguồn của ảnh có tên "Arrow" sẽ được gán một ảnh "down arrow"

4. Sự kiện onKeyUp được kích hoạt khi người dùng nhả phím ra, khi đó nguồn của ảnh "Arrow" sẽ được gán một ảnh "up arrow".

5. Ảnh mặc định, có tên là Arrow, nó sẽ xuất hiện khi người dùng điền dữ liệu vào textbox.

» Tiếp: onSubmit
« Trước: onError
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!