Why Does Chrome Keep Placeholder Text When Focused, and How Can I Fix It?

Overcoming Chrome's Auto-Focus Placeholder Glitch with CSS and jQuery

When working with placeholder text in HTML, it's common to encounter an issue where the placeholder text remains visible even when the input field gains focus. Browsers such as Firefox, Safari, and Edge handle this gracefully and automatically hide the placeholder text. However, Chrome often fails to do so.

To address this specific issue with Chrome, we can utilize CSS or jQuery. Using the following CSS rule, you can make the placeholder text transparent when the input field receives focus:

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

This CSS declaration targets the placeholder text specifically when the input field is focused. By setting the color to transparent, the placeholder text becomes effectively invisible.

If you prefer a jQuery solution, you can use the following code:

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

  $("input[placeholder]").blur(function() {
    $(this).attr("placeholder", $(this).attr("data-placeholder"));
  });
});

In this jQuery code, we listen for the focus event and blur event on input elements with a placeholder attribute. When focus is gained, we clear the placeholder attribute, which hides the placeholder text. When focus is lost, we restore the placeholder text by setting the placeholder attribute to the value stored in the data-placeholder attribute, which we set upon initialization.

Both the CSS and jQuery solutions effectively auto-hide placeholder text in Chrome when the input field gains focus, ensuring a consistent and user-friendly experience across all browsers.

The above is the detailed content of Why Does Chrome Keep Placeholder Text When Focused, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!