-1

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

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

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

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

行动#1

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

行动 #2

现在，用户将鼠标悬停在输入框上。我们想给他们一个关于他们可以搜索什么的建议。从 Action #1 中的文本到该文本的一个很好的淡入淡出效果将是惊人的。

行动#3

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

行动#4

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

4

1 回答 1

2

它只是基本的 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/

于 2012-12-24T09:19:44.630 回答