html技巧:input表单输入框默认提示信息

【51Test.NET-html技巧:input表单输入框默认提示信息】：

　　相信上面两张图片上的输入框里有提示信息这功能大家都见过，有的人应该也自己动手做过。

　　我之前也做过，做法应该和大家都差不多，在输入框里写入提示内容，当鼠标获取焦点后清空内容，当失去焦点后判断内容是否为空，如果为空，则恢复显示提示内容，反则不显示。但这样的做法是否合理？下面一一来做下分析。

　　1、如果输入内容和提示内容完全一样，当失去焦点后，应该如何判断？

　　2、如果input在表单里，提交表单后，提示信息随着表单一并提交，难道还要在后端判断提交信息不等于提示信息，再进行数据操作么？

　　3、如果1、2两条都触发，后端要如果操作？

　　既然这种做法缺点这么多，那怎么做更好呢？其实方法很简单，把提示信息单独写在一个模块里，如div，然后设置这个div的样式，让它浮动到输入框上面，至于js，只需多写一句，当我点击这个div的时候，也触发input框的获取焦点事件即可。

　　这样做的好处就是，不仅解决了1、2两点的问题，而且提示内容不局限于文字了，你可以是图片，甚至是Flash，大大增强了用户交互。

　　简单给段页面代码吧：

view sourcePRint? 

　　附1：这个功能我已经整合在我自己写的插件里，欢迎查看：jquery.HooRay——自己做的一个jquery常用工具插件

HTML