Định nghĩa và sử dụng
- .focusin(): Xử lý một sự kiện "focusin" (xác nhận một focus).
Cấu trúc
- Đã được thêm vào từ phiên bản 1.4
$('p').focusin(function(){
$(this)find('span').css('display','inline');
});
.focusin(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');
});
});
</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 để 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="Nhập text" /> |
<p><input type="text" value="Nhập text" style="color: #000;" /> |
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').focusin(function(){
$(this).find('span').css('display','inline').fadeOut(1200);
});
});
</script>
</head>
<body>
<p><input type="text" value="" /> <span>Focus</span></p>
<p><input type="text" value="" /> <span>Focus</span></p>
</body>
</html>
Hiển thị trình duyệt:
Click vào trường input để 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</span></p> |