Định nghĩa và sử dụng

  • .focusout(): Xử lý một sự kiện "focusout" (xác nhận thoát khỏi focus).

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.4

.focusout(function(){...});

$('p').focusout(function(){
    $(this).find('input').css('color','#ccc');
});

.focusout(function(){...});

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
input { color: #ccc; }
</style>
<script>
$(function(){
    $('p').focusin(function(){
        $(this).find('input').css('color','#000');
    }).focusout(function(){
        $(this).find('input').css('color','#ccc');
    });
});
</script>
</head>

<body>
<p><input type="text" value="Nhập text" />
<p><input type="text" value="Nhập text" />
</body>
</html>

Hiển thị trình duyệt:

Click vào trường input sau đó click ra bên ngoài (thoát khỏi focus) để thấy kết quả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery - sau khi không còn focus

<p><input type="text" value="Nhập text" />
<p><input type="text" value="Nhập text" />

<p><input type="text" value="Nhập text" style="color: #333;" />
<p><input type="text" value="Nhập text" style="color: #333;" />

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
span { display: none; }
</style>
<script>
$(function(){
    $('p').focusout(function(){
        $(this).find('span').css('display','inline').fadeOut(1200);
    });
});
</script>
</head>

<body>
<p><input type="text" value="" /> <span>Focus out</span></p>
<p><input type="text" value="" /> <span>Focus out</span></p>
</body>
</html>

Hiển thị trình duyệt:

Click vào trường input sau đó click ra bên ngoài (thoát khỏi focus) để thấy kết quả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery - click vào input

<p><input type="text" value="" /> <span>Focus</span></p>
<p><input type="text" value="" /> <span>Focus</span></p>

<p><input type="text" value="" /> <span style="display: inline;">Focus out</span></p>
<p><input type="text" value="" /> <span style="display: inline;">Focus out</span></p>