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!