Article Categories

Selected Reading

Display a message on console while focusing on input type in JavaScript?

Javascript Web Development Object Oriented Programming

In JavaScript, you can display console messages when focusing on input elements using the focus and blur event listeners. This is useful for debugging form interactions and tracking user behavior.

Basic Focus Event Example

The focus event triggers when an input element receives focus, while blur triggers when it loses focus:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focus Console Messages</title>
</head>
<body>
    <input id="txtInput" placeholder="Enter your name..." />
    <button id="submitBtn">Submit</button>

    <script>
        const txtInput = document.getElementById('txtInput');
        const submitButton = document.getElementById('submitBtn');

        // Display message when input gains focus
        txtInput.addEventListener('focus', () => {
            console.log('Input field is now focused - user can type');
        });

        // Display message when input loses focus
        txtInput.addEventListener('blur', () => {
            console.log('Input field lost focus - user clicked elsewhere');
        });

        // Handle submit button
        submitButton.addEventListener('click', () => {
            console.log('Form submitted with value:', txtInput.value);
        });

        // Auto-focus the input on page load
        txtInput.focus();
    </script>
</body>
</html>

Multiple Input Fields Example

You can track focus events across multiple input fields:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Input Focus Tracking</title>
</head>
<body>
    <form>
        <input id="firstName" placeholder="First Name" /><br><br>
        <input id="lastName" placeholder="Last Name" /><br><br>
        <input id="email" type="email" placeholder="Email" /><br><br>
        <button type="button" id="submitForm">Submit</button>
    </form>

    <script>
        const inputs = document.querySelectorAll('input');
        
        inputs.forEach((input, index) => {
            input.addEventListener('focus', () => {
                console.log(`Field "${input.placeholder}" is now active`);
            });
            
            input.addEventListener('blur', () => {
                console.log(`Field "${input.placeholder}" lost focus, value: "${input.value}"`);
            });
        });
        
        document.getElementById('submitForm').addEventListener('click', () => {
            console.log('All form values submitted');
        });
    </script>
</body>
</html>

Output

When you interact with the input fields, the browser console will show messages like:

Field "First Name" is now active
Field "First Name" lost focus, value: "John"
Field "Email" is now active
Field "Email" lost focus, value: "john@example.com"
All form values submitted

Event Types for Input Focus

Event	When It Triggers	Use Case
`focus`	Element gains focus	Show help text, highlight field
`blur`	Element loses focus	Validate input, save draft
`focusin`	Element gains focus (bubbles)	Parent container tracking
`focusout`	Element loses focus (bubbles)	Parent container tracking

Practical Use Cases

Focus event console logging is commonly used for:

Form Analytics: Track which fields users interact with most
Debugging: Monitor focus flow in complex forms
User Experience: Identify problematic form sections
Accessibility Testing: Ensure proper tab navigation

Conclusion

Using focus and blur events with console logging helps track user interactions with input fields. This technique is valuable for debugging forms and understanding user behavior patterns.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

315 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next