JavaScript: onFocus và onBlur

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Khi một đối tượng được focus thì 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ột frame 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ện onFocus cho phép ta khởi tạo một hàm dạng cử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 parent frame 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 left frame 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ĩa frameset, 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ên leftfocus.html.

  3. Đoãn mã của frame phải là một tập tin có tên rightfocus.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ình JavaScript của tập tin leftfocus.html.

  7. Hàm focus_on_me() do ta tự định nghĩa được gọi khi sự kiện onFocus đượ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àm defocus_me() cũng do ta tự định nghĩa, nó được gọi khi sự kiện onBlur đượ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ện onFocus được gán ở thẻ <body> của tập tin leftfocus.html. Khi nó được kích hoạt thì sẽ gọi đến hàm focus_on_me().

  12. Sự kiện onBlur được gán cho thẻ <body> của tập tin leftfocus.html. Khi blur khỏi frame trái thì nó được kích hoạt và nó sẽ gọi hàm defocus_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ó

» Tiếp: onError
« Trước: onLoad và onUnLoad
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!