How to Display a Placeholder for Phone Numbers in jQuery ?

Last Updated : 12 Feb, 2024

In JQuery, we can display the placeholder for phone numbers to the user. This increases the interaction of applications with the user. The navigation and the information that is intended for the user have been interpreted properly.

There are several approaches for displaying a placeholder for Phone Numbers in jQuery which are as follows:

Table of Content

Using Input Event
Using Focus and Blur Events

Using Input Event

Input Event in JQuery is mainly triggered when the value of an input field is changed in the UI. We have used Input Event in this approach to dynamically update the placeholder which is based on the user input. It mainly processes the user keystrokes and shows the placeholder.

Syntax:

$(selector).on('input', function() {
    // codd
});

Example: To demonstrate jQuery script using the input event to dynamically update the placeholder of the “Phone Number” input field. When the input field is empty, it displays “Enter phone number” as a placeholder.

HTML

<!DOCTYPE html>
<head>
    <title>Example 1</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js">
      </script>
    <style>
        input {
            padding: 10px;
            margin: 10px;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Approach 1: Using Input Event</h3>
    <label for="phoneNumber">Phone Number:</label>
    <input type="text" id="phoneNumber"
           placeholder="Enter phone number">
 
    <script>
        $(document).ready(function() {
            $('#phoneNumber').on('input', function() {
                let inputValue = $(this).val();
                if (inputValue.length === 0) {
                    $(this).attr('placeholder', 'Enter phone number');
                } else {
                    $(this).removeAttr('placeholder');
                }
            });
        });
    </script>
</body>
 
</html>

Output:

Output

Using Focus and Blur Events

Focus and Blur Events in jQuey allows dynamic handling of the placeholder values in the application. The Focus event can be used to remove the placeholder and the blur event can be used to restore it when the focus is lost. In this appproach, we are using this events.

Syntax:

$('#phoneNumber').on('focus', function() {
    $('#successMessage').empty();
});
$('#phoneNumber').on('blur', function() {
    // code
});

Example: The below code example, uses the focus and blur events to add the placeholder for a phone number input field.

HTML

<!DOCTYPE html>
 
<head>
    <title>Example 2</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js">
      </script>
    <style>
        input {
            padding: 10px;
            margin: 10px;
        }
        .error-message {
            color: red;
            margin-top: 5px;
        }
        .success-message {
            color: green;
            margin-top: 5px;
        }
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using Focus and Blur Events</h3>
    <label for="phoneNumber">Phone Number:</label>
    <input type="text" id="phoneNumber"
           placeholder="Enter phone number">
    <button id="clearBtn">Clear</button>
    <div class="error-message" id="errorMessage"></div>
    <div class="success-message" id="successMessage"></div>
    <script>
        $(document).ready(function() {
            $('#clearBtn').on('click', function() {
                $('#phoneNumber').val('').attr('placeholder', 'Enter phone number');
                $('#errorMessage, #successMessage').empty();
            });
            $('#phoneNumber').on('focus', function() {
                $('#successMessage').empty();
            });
            $('#phoneNumber').on('blur', function() {
                let inputValue = $(this).val();
                let phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
                if (inputValue.length === 0) {
                    $(this).attr('placeholder', 'Enter phone number');
                    $('#errorMessage').text('Phone number is required.');
                } else if (!phoneRegex.test(inputValue)) {
                    $(this).attr('placeholder', 'Enter phone number');
                    $('#errorMessage').text('Invalid phone number format. Use XXX-XXX-XXXX.');
                } else {
                    $(this).removeAttr('placeholder');
                    $('#errorMessage').empty();
                    $('#successMessage').text('Valid phone number!');
                }
            });
        });
    </script>
</body>
 
</html>

Output:

Output

Suggest improvement

How to format Phone Numbers in PHP ?

Share your thoughts in the comments

How to Display a Placeholder for Phone Numbers in jQuery ?

Using Input Event

Syntax:

HTML

Using Focus and Blur Events

Syntax:

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?