关于站位文本（文本框提示字）的一些方法总结

        由于一段时间的web开发经历，自己在浏览网页时养成了一个小的癖好：就是当浏览网页时候，看到有趣的网页效果时会不自觉的按下Ctrl+Shift+C (firefox，safari，chrome，ie是Ctrl+B) 弹出网页调试工具，想看看css，html以及js 到底是怎么写的。

        这两天刚好看了一些网站实现站位文本的方法也就是大家俗称的文本框提示字。以下就是我看到的一些方法，做一下小小的总结。里面用到简单的js的东西也有的用到了jquery的语法。这些代码都是笔者手写完成，意图旨在示意性质，虽然可以使用，但是必然存在许多不健壮地方，希望各位大牛批评指正。

        先看下效果图：

       

方法一：

这种方法是最常见的，但是也是最不值得提倡的方法。

<input type="text" value="请输入姓名" style="width:200px;" onblur="trySet(this,'请输入姓名');"  onfocus="tryClear(this,'请输入姓名');">入姓名');"><script language="javaScript">// 当失去焦点时恢复站位文本function trySet(obj,txt){if(obj.value==""){obj.value = txt;}}// 当获得焦点时清空站位文本function tryClear(obj,txt){if(obj.value==txt){obj.value = "";}}</script>

这种方法虽然简单易懂，但是却非常不符合规范。其产生的问题也有许多，例如：如果将以上input提交到后台的话，如果不在文本框中输入内容的话，则“请输入姓名” 将会被当做默认内容提交到后台，若需要非空验证，或者是正则验证的时候就必须排除掉“请输入姓名”，举一个不恰当的例子：如果我的名字就叫“请输入姓名”，则无法通过非空验证。大家不妨试一下！

此外，使用这种方法还有别的问题，这里想不起来了，希望比较懂的大牛解释下。

方法二：

这种方法是我在某轻博中通过Ctrl+Shift+C发现的，先看代码：

<script type="text/javascript" src="../js/jquery/jquery-1.4.3.min.js"></script><div style="position: relative;"><input type="password" id="password" name="password" value="" style="width: 200px;"><label class="label" id="password_lab" for="password">Password</label></div><style>.label{cursor: text; font-size: 15px;left: 6px;position: absolute;top: 4px;visibility: visible;}.label_focus{visibility: hidden;}</style><script language="javaScript">// 当获得焦点的时候去掉label_focus这个 css类$("#password").focus(function(){$("#password_lab").addClass("label_focus");});// 当失去焦点时，若value值为空则添加label_focus这个css类$("#password").blur(function(){var value = $("#password").attr("value");if(value == ""){$("#password_lab").removeClass("label_focus");}});</script>

该方法原理其实很简单，就是当获得焦点的时候将label标签设为：

visibility: hidden;

注意一定要有position定位

该方法值得提倡（谁让某知名轻博都在用呢） 这种方法相当于之前的方法有许多好处，譬如本例中所使用的input类型为password，若使用方法一，需要在value中放入“Password”，众所周知，这样的话文本框中就会出现一大堆的黑点（这事HTML规定的，咱没法改变）。使用方法二便使type=“password“的文本框起到了站位的。几乎可以兼容任何浏览器。

方法三：

该方法也是我们最希望看到的方法那就是：很简单 —— 一行代码。

<input type="text" placeholder="请输入姓名">

该方法只需要添加一个input的属性placeholder中文意思就是占位符 （而且该文本本事就是浏览器默认灰色，不需要特意设置颜色）

这就是伟大的HTML5带给我们一点小小的鼓励（如果你的浏览器支持HTML5）

可是事情往往事与愿违，有些人喜欢不断更新自己浏览器的版本，而有些人则不喜欢，所以作为程序员，我们就要费尽脑筋去满足各不同人群的需要，做一系列的浏览器兼容处理。（现在是HTML5和CSS3的过渡时期）

相信许多web开发的人都为过圆角什么的大伤脑筋。

其实现在也有关于跨浏览器的HTML5站位文本的解决方案，如果成功的话个人认为前两种解决方案完全可以抛弃了，好像是需要jquery实现的。这里不做过多赘述。

由于最近忙于Android项目的开发，所以对web开发的一些知识忘得比较多，先记下来，以备以后回忆之用。

欢迎各位拍板砖！