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

Question

希望我没有把这个头衔吓跑太多人：-$

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

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

以下是图像中这个问题的主要内容：

此步骤只是在文本输入框中放置一个漂亮的默认文本或占位符。十分简单。

现在，用户将鼠标悬停在输入框上。我们想给他们一个关于他们可以搜索什么的建议。从 Action #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/