How to Make Placeholder Text Auto-Hide on Focus in Chrome?

Auto-Hiding Placeholder Text on Focus: A Comprehensive Guide

When adding placeholder text to input fields, browsers generally conceal it upon user focus. However, Chrome exhibits an exception to this behavior. To address this issue effectively, let's explore potential solutions using both CSS and jQuery.

CSS Solution

<br>input:focus::placeholder {<br>  color: transparent;<br>}<br>

This CSS rule specifically targets the placeholder text when an input field receives focus, making it transparent. Consequently, the placeholder text fades out, simulating the desired auto-hiding behavior.

jQuery Solution

While the CSS solution is sufficient for most browsers, jQuery offers an alternative approach for further customization:

<br>$(function() {<br>  $("input").focus(function() {<pre class="brush:php;toolbar:false">$(this).attr("placeholder", "");

}).blur(function() {

$(this).attr("placeholder", "Type something here!");

});
});

This jQuery script listens for the focus and blur events on input fields. When a field gains focus, it clears its placeholder attribute, making the placeholder text disappear. Conversely, when the field loses focus, the placeholder text is restored.

Conclusion

By implementing one of the provided solutions, whether using CSS or jQuery, you can effectively achieve auto-hiding of placeholder text on focus, thereby enhancing user experience across different browsers, including Chrome.

The above is the detailed content of How to Make Placeholder Text Auto-Hide on Focus in Chrome?. For more information, please follow other related articles on the PHP Chinese website!