19/09/2018, 14:49
Sự kiện onchange
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 < ! DOCTYPE html > < html > < body > < p > Ch ọ n t ê n xe t ừ danh s á ch d ướ ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <body> <p>Chọn tên xe từ danh sách dưới đây.</p> <select id="mySelect" onchange="myFunction()"> <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> <p>Khi bạn chuyển sang một xe mới, một hàm sẽ được kích hoạt để hiển thị giá trị ra ngoài.</p> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("mySelect").value; document.getElementById("demo").innerHTML = "Bạn đã chọn xe: " + x; } </script> </body> </html> |
Demo
Xem thêm các ví dụ bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính onchange được kích hoạt ngay khi giá trị của thẻ thay đổi.
Mẹo: Sự kiện này tương tự như sự kiện oninput. Điểm khác biệt là sự kiện oninput diễn ra ngay khi giá trị của thẻ thay đổi, trong khi thuộc tính onchange diễn ra khi bạn chuyển trỏ chuột sang một thành phần khác. Một sự khác biệt nữa đó là sự kiện onchange có thể sử dụng trong thẻ <keygen> và thẻ <select>. Xem ví dụ bên dưới.
Trình duyệt hỗ trợ
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| onchange | 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 onchange="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 được sử dụng trong thẻ : <input type=”checkbox”>, <input type=”file”>, <input type=”password”>, <input type=”radio”>, <input type=”range”>, <input type=”search”>, <input type=”text”>, <keygen>, <select> và <textarea>.
Ví dụ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <p>Chỉnh sửa nội dung trong ô dưới, sau đó nhấn chuột ra ngoài để kích hoạt sự kiện.</p> Nhập nội dung bất kỳ : <input type="text" name="txt" value="Xin chào" onchange="myFunction(this.value)"> <script> function myFunction(val) { alert("Giá trị nhập vào đã được thay đổi. Giá trị mới là: " + val); } </script> </body> </html> |
Demo
