JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Focus Change Detection</title>
</head>
<body>

  <input type="text" id="input1" placeholder="Input 1">
  <input type="text" id="input2" placeholder="Input 2">
  <textarea id="textarea1" placeholder="Textarea"></textarea>

  <script>
    function handleFocusChange(event) {
      // Log the focused element to the console
      console.log('Focused Element:', event.target);
    }

    // Attach focus and blur event listeners to relevant elements
    document.getElementById('input1').addEventListener('focus', handleFocusChange);
    document.getElementById('input2').addEventListener('focus', handleFocusChange);
    document.getElementById('textarea1').addEventListener('focus', handleFocusChange);

    document.getElementById('input1').addEventListener('blur', handleFocusChange);
    document.getElementById('input2').addEventListener('blur', handleFocusChange);
    document.getElementById('textarea1').addEventListener('blur', handleFocusChange);
  </script>

</body>
</html>