Home > Article > Web Front-end > How Do I Auto-Hide Placeholder Text on Focus in Chrome?
Auto-Hiding Placeholder Text on Focus
Internet browser automation has simplified the hiding of placeholder text upon focus, but this convenience has an exception: Chrome. Targeting this particular browser, a specific solution must be implemented.
CSS Approach:
input:focus::placeholder { color: transparent; }
This CSS rule sets the placeholder text to transparent upon focus, effectively making it invisible.
jQuery Approach:
<input type="text" placeholder="Type something here!">
$("#myInput").focus(function() { $(this).attr("placeholder", ""); });
The jQuery code removes the placeholder text when the input field gains focus and restores it upon loss of focus.
Note:
Originally, this method was considered browser-exclusive to Chrome, but modern browsers now support the input::placeholder selector, making both CSS and jQuery approaches applicable across all browsers.
The above is the detailed content of How Do I Auto-Hide Placeholder Text on Focus in Chrome?. For more information, please follow other related articles on the PHP Chinese website!