html - 如何创建类似于 Tumblr 的文本字段？

Question

我正在尝试创建类似于 tumblr.com 登录和注册文本字段的文本字段。

我启动了 Firebug 以试图了解幕后发生的事情，但它确实超出了我的范围(我是一名程序员)。

Answer 1

Tumblr 正在使用 Sprite 进行文本输入处理(我想你是在谈论当你将鼠标输入输入时的发光？)

看看这张图片: http://www.tumblr.com/images/register_login/input.png

关于 Sprite 的更多信息:http://www.w3schools.com/css/css_image_sprites.asp

发生的事情非常简单。当您将鼠标放入时，他们会使用 javascript 添加一类模糊。这会改变图像的背景位置，从而产生效果。这真的很简单。

form .input_wrapper.blurred {
    background-position: left -136px;
}

您可以只使用 jQuery 的 toggleClass 来打开和关闭类。然后你可以使用那个类来做他们正在做的事情(改变图像的背景位置，改变字体颜色使预选值更亮，等等)

根据评论更新

以下是您需要采取的步骤:

第 1 步 - 设计图片 (photoshop/Aviary.com ) 或下载一些库存图片/请设计师为您设计。您需要的图像用于 Sprite 。

第 2 步 - 表单元素的标记

第 3 步 - 表单元素的 Css(甚至在添加 jquery 之前，您可以使用 Firebug 来切换改变背景元素位置的类)

第 4 步 - 用于表单元素的 jQuery。 toggleClass/addClass/removeClass 用于更改类和重新定位背景。您可以使用 jQuery .focus 函数，也可以在表单元素上使用 onFocus/onBlur 属性并调用一些函数来清除文本。从 jquery.attr 选择器中获取默认文本后，您可以将其设置为变量，然后如果鼠标进入时该值为默认值，或者为空，则清除它，如果不是，则不清除它。

我不会为您编写代码和设计 Sprite ，但这就是完成的方式。