1. Description
현재 포커스가 들어가 있는 Element를 찾는다.
2. Example
3초마다 포커싱되는 Element를 찾아 배경색을 변경한다.
| Amazon | ||
[HTML Code]
[//HTML Code]
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/focus</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div name="_1q74-example-root">
<div name="_1q74-example-1">
<table name="bigtech" border="1">
<tr>
<td>Google</td>
<td>Amazon</td>
<td>Facebook</td>
</tr>
<tr height="50px">
<td><input type="text"/></td>
<td><input type="checkbox"/></td>
<td>
<select>
<option>buy</option>
<option>sell</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
setInterval(function() {
const focusedElement = $("[name='bigtech'] :focus");
if(!focusedElement.is("[style]")) {
focusedElement.parent().css("background-color", "deeppink");
}
}, 3000);
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
</script>
<style>
[name|="_1q74-example"] td {
width: 100px;
}
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>4. File
[javascript][jquery][selector]focus.html
0.00MB
5. See also
pseudo-class, useversal-selector, jquery-extensions
6. Reference
https://api.jquery.com/focus-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #29】Has Attribute Selector [name] (0) | 2023.03.04 |
|---|---|
| 【jQuery/Selector #28】:gt() Selector (0) | 2023.02.24 |
| 【jQuery/Selector #26】:first Selector (0) | 2023.02.24 |
| 【jQuery/Selector #25】:first-of-type Selector (0) | 2023.02.24 |
| 【jQuery/Selector #24】:first-child Selector (0) | 2023.02.23 |