更改表单输入onload的值然后onhover，fade onclick并最终删除类型？

Question

希望我没有吓到太多拥有这个头衔的人： - $

使用Javascript或jQuery，我们如何进行表单文本输入：

1. 显示默认值/占位符文字
2. 悬停时，请使用其他文本替换默认值/占位符文本
3. 点击后，稍微淡出不同的文字
4. 最后，当用户开始输入时，完全删除默认/占位符文本

以下是图片中此问题的主要内容：



此步骤只是在文本输入框中放置一个漂亮的默认文本或占位符。容易腻。



现在，用户正在盘旋输入框。我们想给他们一个他们可以搜索的建议。从行动＃1中的文本到本文的一个很好的淡化效果将是惊人的。



在这里，我们淡化了建议文本，鼓励用户输入自己的搜索字词。



最后，用户开始输入并完全删除建议文本。

Answer 1

这只是基本的HTML，jQuery和CSS。

<强> HTML ：

<input type="text" placeholder="Search..." data-placeholder-hover="Search for stuff!" />​

<强>的JavaScript ：

$('input[data-placeholder-hover]').on('mouseenter mouseleave', function() {
    var $this = $(this);

    $this.toggleClass('hovered');

    var temp = $this.prop('placeholder');

    $this.prop('placeholder', $this.data('placeholder-hover'))
    $this.data('placeholder-hover', temp);
});​

<强> CSS ：

input.hovered::-webkit-input-placeholder {
    color: red;
}

input.hovered:-moz-placeholder {
    color: red;
}

input.hovered:-ms-input-placeholder {
    color: red;
}​

演示：http://jsfiddle.net/b94mb/

您可以使用:focus和其他伪选择器为文本框设置更多样式：http://jsfiddle.net/b94mb/4/