Blog hướng dẫn các cách download kiến thức kinh nghiêm thủ thuật chia sẻ phần mềm tool soft miễn phí là gì. Blog.locbanbekhongtuongtac.com

Table of Content

Trang chủ
Hỏi Đáp
Là gì

Onfocus là gì

Khimột đối tượng được focusthì nó sẽ chờ người dùng làm gì đó, ví dụ như nhấn nút lệnh, click vào link, thực hiện và dừng hoạt ảnh. Nếu bạn di chuyển vào và ra mộtframe nào đó(bạn focus rồi lại rời frame), thì nó sẽ không được focus nữa (lose focus) hay còn gọi là"blur".

Sự kiệnonFocus cho phép ta khởi tạo một hàm dạngcửa sổ hay frame khi di chuyển chuột vào cửa sổ đó, còn sự kiện onBlur sẽ được kích hoạt khi bạn rời nó. Khi focus vào cửa sổ thì cửa sổ đó sẽ nằm trên cùng so với các cửa sổ khác.

Để focus/blur vào/rời một đối tượng nào đó thì ta có ba cách là click chuột, dùng phím tab hoặc dùng phím tắt (Access Key) dành cho đối tượng đó.

Ví dụ 1:

Ví dụ dưới đây sẽ thay đổi màu nền của frame bên trái thành màu 'pink' khi nó được focus và thành màu 'yellow' khi nó không được focus (blur). Thanh trạng thái ở cuối cửa sổ sẽ cho ta biết frame nào đang được focus.

<!-- The parentframe file (tập tin chính chứa frame)-->

<html>

<head>

<title>Frame Me!</title>

</head>

1 <frameset cols="25%,75%">

2 <frame src="leftfocus.html" name="left">

3 <frame src="rightfocus.html" name="right" >

</frameset>

</html>

----------------------------------------------------------------------

<!-- The right frame file (rightfocus.html)-->

<html>

4 <head><title>Right Frame</title></head>

5 <body bgColor="lightblue">

<font face="arial" size=4> right frame<br>

</body>

</html>

----------------------------------------------------------------------

<!-- The leftframe file (leftfocus.html)-->

<html>

<head><title>Left Frame</title>

6 <script language="JavaScript">

7 function focus_on_me(){

document.bgColor="pink"; // Current doc is the left frame

8 window.status="focus leftframe";

}

9 function defocus_me(){

parent.left.document.bgColor="yellow"; // Another way to

// reference

10 window.status="focus rightframe"; // See the status bar

}

</script>

</head>

11 <body onFocus="focus_on_me()" // Event handlers

12 onBlur="defocus_me()"

bgColor="lightgreen">

<p>Left Frame</p>

</body>

</html>

GIẢI THÍCH

  1. Trong ví dụ trên có 3 tập tin (file) liên quan đến các frame. Tập tin đầu tiên định nghĩaframeset, nó bao gồm hai frame con, frame trái có độ rộng =25%, frame phải là 75%.

  2. Đoạn mã của frame trái là một tập tin thứ hai có tênleftfocus.html.

  3. Đoãn mã của frame phải là một tập tin có tênrightfocus.html.

  4. Tiêu đềcủa frame phải.

  5. Màu nền của frame phải làlightblue.

  6. Điểm bắt đầu của chương trìnhJavaScript của tập tinleftfocus.html.

  7. Hàmfocus_on_me() do ta tự định nghĩađược gọi khi sự kiệnonFocus được kích hoạt, cụ thể là khi người dùng focus vào frame tương ứng, màu nền lúc này sẽ trở thành màu 'pink'.

  8. Thanh trạng thái (status) của cửa sổ được gán một chuỗi là"focus leftframe".

  9. Hàmdefocus_me() cũng do ta tự định nghĩa, nó được gọi khi sự kiệnonBlur được kích hoạt, cụ thể là khi người dùng blur khỏi frame hiện thời.

  10. Thanh trạng thái được gán nội dung là"focus rightframe".

  11. Sự kiệnonFocus được gán ở thẻ<body> của tập tinleftfocus.html. Khi nó được kích hoạt thì sẽ gọi đến hàmfocus_on_me().

  12. Sự kiệnonBlur được gán cho thẻ<body> của tập tinleftfocus.html. Khi blur khỏi frame trái thì nó được kích hoạt và nó sẽ gọi hàmdefocus_me().

Ví dụ 2:

Ví dụ sau đây sẽ áp dụng onFocus và onBlur cho <input type='text />, cụ thể là khi focus vào thì màu nền sẽ trở thành màu yellow, còn khi blur ra thì màu trở về màu 'white'.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
Họ và tên: <input type="text" onFocus="style.background='yellow';" onBlur="style.background='white';" />
</body>
</html>

Ví dụ 3:

<html>

<head>

<title>Using onFocus and oBlur Event Handler</title>

<meta charset="utf-8">

<script language="JavaScript">

1 function handler(message){

2 window.status = message; // Xem thông tin trên thanh trạng thái

document.title = message; // Xem thông tin trên thanh trạng tiêu đề

}

</script>

</head>

<body bgcolor="magenta"><b>onFocus & onBlur

<i>(Khi bạn focus vào một box nào đó thì sẽ có một thông báo hiển thị tại

thanh trạng thái hoặc thanh tiêu đề)</i>

3 <form name="form1">

<p>Mời điền tên:

4 <input type="text"

name="namestring"

size="50"

5 onFocus="handler('Vui lòng điền tên của bạn!')"

onBlur="if(this.value=='') {alert('Bạn cần điền tên!'); this.focus();}"

placeholder="Xin mời điền tên"

>

<p>Xin mời bình luận:<br>

6 <textarea name="comments"

align="left"

7 onFocus="handler('Bạn đã bình luận chưa?')"

onBlur="if(this.value=='') {alert('Bạn cần điền bình luận!'); this.focus();}"

placeholder="Bình luận tại đây..."

rows="5" cols="50"></textarea><p>

<input type="button"

value="submit">

<input type="reset"

value="clear">

</form>

</body>

</html>

GIẢI THÍCH

1. Hàm do ta tự định nghĩa. Hàm này có nhiệm vụ hiển thị thông điệp ra thanh trạng thái và thanh tiêu đề.

2. Bạn có thể nhận thấy thông điệp được hiển thị ở thanh trạng thái và thanh tiêu đề.

3. Bắt đầu của form.

4. Kiểu của input là text field.

5. Text field chứa thuộc tính sự kiện onFocus và onBlur.

6. Định nghĩa textarea để chứa bình luận người dùng.

7. Ta cũng dùng hai sự kiện onFocus và onBlur của nó

Video liên quan

Đăng nhận xét