19/09/2018, 14:49
Sự kiện onblur
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 < ! DOCTYPE html > < html > < body > Nh ậ p t ê n c ủ a b ạ n : < input type = "text" name = "fname" id = ...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> Nhập tên của bạn: <input type="text" name="fname" id="fname" onblur="myFunction()"> <p>Khi bạn di chuyển con trỏ nháy ra khỏi ô nhập tên, một hàm sẽ được kích hoạt để chuyển toàn bộ ký tự đã nhập thành viết hoa.</p> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </body> </html> |
Demo
Tham khảo thêm các ví dụ ở bên dưới
Định nghĩa và cách sử dụng
Thuộc tính onblur được kích hoạt ngay khi người dùng chuyển con trỏ nháy ra ngoài thẻ.
Onblur thường được sử dụng nhiều nhất trong việc kiểm tra tính hợp lệ form.
Mẹo: Thuộc tính onblur ngược với thuộc tính onfocus.
Trình duyệt hỗ trợ
Thuộc tính | |||||
---|---|---|---|---|---|
onblur | 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 onblur="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
Thuộc tính dùng được trong mọi thẻ của 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 21 22 |
<!DOCTYPE html> <html> <body> <p>Khi bạn chuyển trỏ chuột vào khung, một hàm sẽ được kích hoạt để chuyển màu nền sang vàng. Khi bạn chuyển trỏ chột ra ngoài, một hàm sẽ được kích hoạt để chuyển màu nền sang đỏ.</p> Nhập tên của bạn: <input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()"> <script> // Focus = Chuyển nền sang màu vàng function focusFunction() { document.getElementById("myInput").style.background = "yellow"; } // Onblur = Chuyển nền sang màu đỏ function blurFunction() { document.getElementById("myInput").style.background = "red"; } </script> </body> </html> |
Demo