How Can I Remove Placeholder Text on Focus in Chrome?

Removing Placeholder Text on Focus with CSS or jQuery

When entering text into a text field, placeholder text typically disappears to make way for the user's input. While most browsers do this automatically, Chrome does not.

CSS Solution

To specifically target Chrome, you can use the input:focus::placeholder selector:

input:focus::placeholder {
  color: transparent;
}

This CSS rule sets the placeholder text to transparent when the input field is in focus.

jQuery Solution

You can also achieve this with jQuery:

$("input").on("focus", function() {
  $(this).attr("placeholder", "");
});

$("input").on("blur", function() {
  $(this).attr("placeholder", "Type something here!");
});

This jQuery code sets the placeholder text to an empty string when the input field is in focus and restores it to the desired text when the field loses focus.

Browser Support

UPDATE:

All modern browsers now support hiding placeholder text on focus using the input:focus::placeholder CSS selector. Therefore, the jQuery solution is no longer necessary.

The above is the detailed content of How Can I Remove Placeholder Text on Focus in Chrome?. For more information, please follow other related articles on the PHP Chinese website!