我正在尝试创建类似于 tumblr.com 登录和注册文本字段的文本字段。
我启动了 Firebug 以试图了解幕后发生的事情,但它确实超出了我的范围(我是一名程序员)。
最佳答案
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 ,但这就是完成的方式。
关于html - 如何创建类似于 Tumblr 的文本字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6728503/