How to use Focus and Blur Events In JQuery
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>w3wiki</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:
How to Display a Placeholder for Phone Numbers in jQuery ?
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