Fade In and / or Out Placeholder Text

问题

Is there a way to fade in and out an input's placeholder text?

I've tried:

$('.userBox::-webkit-input-placeholder').animate({color: '#888888'}, 500);

But this just crashes...

回答1:

If you want to fade out on focus, and fade back in on blur (when the input box is empty), the following should work in webkit:

HTML:

<input id="user_email" name="user[email]" placeholder="user@example.org" type="email" />

CSS:

input[type="email"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="email"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}

jsFiddle: http://jsfiddle.net/a9UA3/

回答2:

If you're referring to the placeholder text supplied by the browsers' implementation, I don't believe so. if you wanted to implement a custom placeholder using focus, blur & key* events then yes it's possible.

回答3:

Try using

$('.userBox::-webkit-input-placeholder').fadeOut(500);

Or, alternatively you could use this plugin.

来源：https://stackoverflow.com/questions/17625737/fade-in-and-or-out-placeholder-text