Định nghĩa và sử dụng
- Bộ chọn :focus: giúp chọn được thành phần khi được focus.
Cấu trúc
- Đã được thêm vào từ phiên bản 1.6
$(':focus')
$('input:focus')
Ví dụ
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>
.bgFocus {
background: blue;
}
</style>
<script>
$(function(){
$("body").delegate("*","focus blur", function(event) {
$(this).toggleClass("bgFocus", $(this).is(":focus"));
});
$(function(){
</script>
</head>
<body>
<input type="button" value="Button input" /> type = button<br />
<input type="text" value=" type = text" /><br />
<input type="hidden" value="hidden" /> type = hidden<br />
<span style="display:none;">span display none</span> span display none<br />
<input type="file" /> type = file<br />
<input type="image" src="images/btn_submit.jpeg" /> type = image<br />
<input type="password" value="password" /> type = password<br />
<input type="radio" /> type = radio<br />
<input type="radio" checked="checked" /> checked<br />
<input type="radio" disabled="disabled" /> disabled<br />
<input type="text" value="type = text" /><br />
<input type="reset" value="Reset" /> type = reset<br />
<input type="submit" value="Submit" /> type = submit<br />
<input type="checkbox" /> type = checkbox<br />
<select>
<option>option01</option>
<option>option02</option>
<option>option03</option>
</select><br />
<textarea rows="5" cols="25">textarea</textarea><br />
<input type="checkbox" checked="checked" /> checked<br />
<input type="checkbox" selected="selected" /> selected<br />
<input type="checkbox" disabled="disabled" /> disabled<br />
<button>Button</button> tag button.
</body>
</html>
Hiển thị trình duyệt:
$(':focus') giúp chọn được thành phần khi được focus, click vào các trường input để thấy hiệu ứng.