Đị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
$('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" 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 style="display: inline;">Focus out</span></p> |