Đị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

.focusin(function(){...});

$('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" />

<p><input type="text" value="Nhập text" style="color: #000;" />
<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>Focus</span></p>

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