Ví dụ và cách sử dụng sự kiện onchange trong HTML.

Sự kiện onchange

Posted by: admin in Thư viện sự kiện HTML 1 Comment

« Thuộc tính sự kiện trong HTML

<!DOCTYPE html>

<html>

<body>

<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>

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ụ

<!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)">

function myFunction(val) {

alert("Giá trị nhập vào đã được thay đổi. Giá trị mới là: " + val);

}