How to Clear an Input Field on Focus with JavaScript

Author:

Introduction

In some scenarios, you may want to clear the contents of an input field when a user focuses on it, such as when a field has placeholder text or default values. JavaScript can help you achieve this easily by detecting the focus event on the input field and clearing its value.

In this tutorial, you will learn how to use JavaScript to clear an input field when the user focuses on it.

Development Steps

  1. Create an Input Field with HTML: Define an input field in HTML with a default value or placeholder text.
  2. Use JavaScript for Interaction: Add a JavaScript function to clear the input field when it receives focus.
  3. Optionally, Add Placeholder Text: Display placeholder text after clearing the input field to guide the user.

Complete HTML, CSS and JavaScript Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clear Input on Focus</title>
    <style>
        /* Simple styles for input field */
        input {
            width: 300px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>
<body>

    <!-- Input Field with Default Text -->
    <input type="text" id="myInput" value="Enter your name" onfocus="clearInput(this)">

    <script>
        // Function to clear the input field when focused
        function clearInput(input) {
            input.value = ''; // Clears the input field value
        }
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Create an Input Field with HTML

In the HTML code, an input field is created with a default value using the value attribute. The input field has the ID myInput to identify it, and an onfocus event handler is attached to trigger the JavaScript function when the input field is focused.

<input type="text" id="myInput" value="Enter your name" onfocus="clearInput(this)">

  • value="Enter your name": This sets the default text inside the input field.

  • onfocus="clearInput(this)": The onfocus event triggers the clearInput JavaScript function when the user clicks or taps on the input field.

Step 2: JavaScript to Clear the Input Field

The clearInput() function is a simple JavaScript function that clears the value of the input field when it's focused.

function clearInput(input) {
    input.value = ''; // Clears the input field's value
}
  • input.value = '';: This line clears the value of the input field by setting it to an empty string when the input field is focused.

Optional: Use Placeholder Text Instead of Default Value

You can also use the placeholder attribute instead of setting a default value. The placeholder text will disappear when the user types into the field, without needing to manually clear the value.

<input type="text" id="myInput" placeholder="Enter your name">

In this case, no JavaScript is needed since the placeholder text is automatically handled by the browser.

Customization

Reset the Input Field if Left Empty

You can enhance the functionality by resetting the input field's value if the user leaves it empty after focusing and leaving the field (blur event):

function clearInput(input) {
    input.value = ''; // Clears the input field value on focus
}

function resetInput(input) {
    if (input.value === '') {
        input.value = 'Enter your name'; // Restores default value if input is empty
    }
}

In the HTML:

<input type="text" id="myInput" value="Enter your name" onfocus="clearInput(this)" onblur="resetInput(this)">

Handle Multiple Input Fields

If you have multiple input fields and want to clear them on focus, you can use a more generic function by referencing the input field by its id or class:

<!-- Multiple input fields -->
<input type="text" class="clear-on-focus" value="Enter your name">
<input type="email" class="clear-on-focus" value="Enter your email">

JavaScript:

document.querySelectorAll('.clear-on-focus').forEach(input => {
    input.addEventListener('focus', function() {
        this.value = '';
    });
});

This script adds the focus event listener to all input fields with the clear-on-focus class.

Conclusion

Clearing an input field on focus using JavaScript is a simple yet useful feature, especially when dealing with default values or placeholder text. This tutorial showed you how to create a form where the input fields are cleared when the user interacts with them, providing a smoother user experience. You can further customize this approach to suit your specific needs.

Comments

Post a Comment

Leave Comment