使用jQuery为输入标记的占位符属性设置动画

Question

我很惊讶以前没有被问过。

目的纯粹是美学，不会影响用户体验。

是否可以将jQuery .animate()，.fadeIn()，.fadeOut()等与<input>标记的placeholder属性中包含的值一起使用？

示例：

<input name="user" placeholder="Please enter your username" />

单击输入字段时，占位符文本淡出。如果用户单击并且该字段失去焦点，则占位符文本将重新淡入。

Answer 1

试试这段代码：

$(function(){
  $('#textbox1').on("focus",function(){
    $('#textbox1').attr('placeholder').fadeOut();
  });
  $('#textbox1').on("blur",function(){
    $('#textbox1').attr('placeholder').fadeIn();
  });
});