Question

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

我发起了萤火虫试图了解窗帘背后的情况，但它确实落后于我（我是一名程序员）。

Answer 1

Firebug是帮助发现这一点的好工具。你应该能够找到这个CSS：

.ghostwriter_input {
width: 176px;
color: #869CB2;
font-size: 20px;
font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;
border-width: 0;
background: url('/images/x.gif');
margin: 12px 0 0 11px;
padding: 8px 10px 8px 10px;
cursor: pointer;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}

这是主要使用的，但也有其他属性。

Answer 2

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）或下载一些库存/让设计师为您设计它们。你需要的图像是精灵。

第2步 - 表单元素的标记

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

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

我不会写代码并为你设计精灵，但这就是它的完成方式。

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

2 个答案: