HTML Code

<!DOCTYPE html>



<html lang="en">



<head>



  <meta charset="utf-8">



  <title>jQuery focus selector demo</title>



  <style>



    body { font-family: sans-serif; padding: 16px; }



    #content { padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; max-width: 24rem; }



    .focused { background: #abcdef; }



    label { display: block; margin: 8px 0; }



    input, select, textarea, button { display: block; margin-top: 4px; padding: 6px; width: 100%; box-sizing: border-box; }



  </style>



</head>



<body>



  <div id="content">



    <label>Name <input type="text"></label>



    <label>Topic



      <select>



        <option>General</option>



        <option>Support</option>



      </select>



    </label>



    <label>Message <textarea rows="2"></textarea></label>



    <button type="button">Send</button>



  </div>



  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>



  <script>



    $("#content").on("focus blur", "*", function() {



      var elem = $(this);



      setTimeout(function() {



        elem.toggleClass("focused", elem.is(":focus"));



      }, 0);



    });



  </script>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery :focus — official delegate demo (Try It)