Ví dụ và cách sử dụng thuộc tính onfocus trong HTML.

Sự kiện onfocus

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

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

<!DOCTYPE html>

<html>

<body>

<p>Một hàm sẽ được kích hoạt khi bạn nhấn chuột vào một trong những ô bên dưới. Hàm này sẽ thay đổi màu nền của ô.</p>

Họ của bạn: <input type="text" id="fname" onfocus="myFunction(this.id)"><br>

Tên của bạn: <input type="text" id="lname" onfocus="myFunction(this.id)">

function myFunction(x) {

document.getElementById(x).style.background = "yellow";

}

</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 onfocus được kích hoạt ngay chi người dùng chuyển con trỏ vào thẻ.

Onfocus được sử dụng hầu hết trong thẻ <input>, <select> và <a>.

Mẹo: Thuộc tính onfocus ngược với thuộc tính onblur.

Trình duyệt hỗ trợ

Thuộc tính
onfocus	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 onfocus="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ử dụng trong tất cả các thẻ của HTML ngoại trừ : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title>.

Ví dụ

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

// 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";

}