1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>focus demo</title>
6 <style>
7 .focused {
8 background: #abcdef;
9 }
10 </style>
11 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
12</head>
13<body>
14
15<div id="content">
16 <input tabIndex="1">
17 <input tabIndex="2">
18 <select tabIndex="3">
19 <option>select menu</option>
20 </select>
21 <div tabIndex="4">
22 a div
23 </div>
24</div>
25
26<script>
27$( "#content" ).delegate( "*", "focus blur", function() {
28 var elem = $( this );
29 setTimeout(function() {
30 elem.toggleClass( "focused", elem.is( ":focus" ) );
31 }, 0 );
32});
33</script>
34
35</body>
36</html>
37