2009-2-8 下午 - Web开发 - -

大家应该经常看到在文本框里提示文字，然后一点就没了。通常做法都是默认给个value，通过js来处理。详细实现都不介绍了，大家都会。现在来看一下一个比较创意的实现。

就是直接用label的内容盖在input上面，然后用js来处理一下。详细实现就不用说了，反正我想尝试纯CSS是没办法实现滴。从结构上来看，还是比较理想的，充分利用了label

<label id="usernameLabel" for="username" class="placeholder"><span>Member Name</span></label>
<input id="username" name="username" class="text" type="text" maxlength="128" value="" />

MobileMe的登录界面

其实看图看不出什么，点图去网站看一下。

我还特别试了一下noscript的效果，跳转 囧rz。

有些细节的，比如提示文字从灰变得更灰的过渡效果，是-webkit-transition的应用，要用webkit的浏览器才能体现。

再其实，input有个叫placeholder的属性，参考以前类型为search的input及相关属性，可以直接用在type="text"的input上，不过哪种方式在哪些情况应用会更适合呢，大家自己决定吧。

这篇文章发表于2009年2月8日 23:39:10，并被分类于Web开发。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论， 也可以发表你的评论。

共有 13 条评论

  1. Andre @ 2009-02-09 01:05 #

    好东西，学习了

    回复
  2. AlloVince @ 2009-02-09 08:17 #

    登录框或者搜索框还好说，如果是输入条目比较多的表单，回过头去复查的时候会完全不知道自己输入的都是什么

    回复
  3. tommyfan @ 2009-02-09 09:27 #

    =..= 经鉴定,此为广告贴

    回复
  4. Cat Chen @ 2009-02-09 10:41 #

    要買MobileMe的話，可以考慮和我們一起買哦～

    回复
  5. xiaorsz @ 2009-02-09 15:56 #

    不错的东东，你怎么不试试？

    回复
    • aoao @ 2009-02-09 20:33 #

      线上的版本还没改

      回复
  6. ashchan @ 2009-02-09 16:09 #

    有几个基于prototype和jquery的插件提供类似功能。如github上的jquery-form-prompt，jquery-clearinginput和prototype_helpers等。

    回复
  7. 大猫 @ 2009-02-10 10:04 #

    这个登录界面用的就是jquery吧

    回复
  8. 千鸟 @ 2009-03-26 00:51 #

    这个玩意儿太高级了。

    回复
  9. hzhjun @ 2009-05-06 09:32 #

    MSN最新版似乎就是用的这样的效果~

    回复
  10. sam @ 2009-05-23 16:32 #

    这个能用Jquery做。

    回复
  11. 古斯比德 @ 2009-06-03 17:58 #

    果然是good idea,noscript情况下跳转，不错；

    回复
  12. swding @ 2009-06-19 15:53 #

    恩, 有点意思.

    回复

发表评论

（必填）

（必填）