WebVN Cộng đồng web Việt Nam
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <p>Hàm sẽ được kích hoạt khi người dùng thả một phím đã nhấn trong thẻ. Hàm này sẽ chuyển toàn bộ nội dung sang chữ viết hoa.</p> Nhập tên của bạn: <input type="text" id="fname" onkeyup="myFunction()"> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </body> </html> |
Xem thêm ví dụ bên dưới
Định nghĩa và cách sử dụng
Thuộc tính onkeyup được kích hoạt khi người dùng thả một phím (trên bàn phím).
Mẹo: Thứ tự sự kiện liên quan tới onkeyup:
- onkeydown
- onkeypress
- onkeyup
Trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| onkeyup | Có | Có | Có | Có | Có |
Khác biệt giữa HTML 4.01 và HTML5
Không có sự khác biệt.
Cú pháp
|
1 |
<element onkeyup="script"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| script | Chạy script khi thuộc tính được kích hoạt |
Chi tiết
Sự kiện được sử dụng trong tất cả các thẻ HTML ngoại trừ : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title>
Ví dụ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <p>Khi bạn nhấn và giữ một phím trong thẻ bên dưới, màu nền sẽ chuyển sang màu đỏ. Thả phím ra, màu nền sẽ chuyển sang màu xanh lá cây.</p> <input type="text" id="demo" onkeydown="keydownFunction()" onkeyup="keyupFunction()"> <script> function keydownFunction() { document.getElementById("demo").style.backgroundColor = "red"; } function keyupFunction() { document.getElementById("demo").style.backgroundColor = "green"; } </script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <p>Hàm sẽ được kích hoạt khi người dùng thả phím trên thẻ input ở dưới. Hàm sẽ hiển thị nội dung trong thẻ input sau khi phím được thả.</p> Nhập tên của bạn: <input type="text" id="fname" onkeyup="myFunction()"> <p>Tên tôi là: <span id="demo"></span></p> <script> function myFunction() { var x = document.getElementById("fname").value; document.getElementById("demo").innerHTML = x; } </script> </body> </html> |
