时间：2013-07-18 作者：剧中人
今天小剧讨论的这个效果，与一年前写过的一篇博文类似，愿意的话可以先移步到《自动提示输入信息效果》页面。
那篇文章实现了很初级的文本提示效果，但是标题貌似写得有点儿偏。今天再提它，一是因为那份插件已经不能满足我们目前的需求了，二是在实际中开发，蹩脚的编写方式会给使用上带来不便。
开发前理清思路是最重要的，明白自己要写什么，才会在敲击键盘的过程中减少增删代码的捉鸡状况。关于今天要提到的效果，我整理的一句话就是：
带有提示文本的输入框，交互统一且效果运行不影响表单校验。
这类效果目前各类网页里都有自己的解决方案，各有千秋，这里小剧来分析一下前端搬砖工们常用的实现方式。
1 原生placeholder属性：在支持html5的浏览器下，input有一个增强型的属性【placeholder】，利用它可以很高效的完成此效果，不影响dom结构，也不会对任何校验产生影响。然而缺点是各浏览器表现不一致，无法通过原生方法做到向下兼容。因此在现有浏览器分布情况下，这位小伙伴就被无情的KO了。
2 value值替换：这个方案就是小剧之前写的对placeholder的实现方式。优点是配置方便，实现简单，缺点很明显，就是在做内容校验的时候，提示文本会影响校验结果的判断，而且对于特殊类型的输入框也无能为力，比如密码。 当然，JQUERY自己在插件开发的时候采用了一种很明智的处理方式，就是在文本提示的时候，改写了val方法。也就是说提示文本状态下，此时通过jquery的方法来获取到的value值为空。这种方式很好的处理提示与校验的矛盾，但无法解决使用原生JS或其他框架下获取输入框内容的问题，因此小剧不推荐使用。
3 DOM表现：这种处理方式很简单，实现方式是：在input输入框的dom附近插入标签，用标签显示提示内容，JS辅助提示效果。这种处理方式虽然也不是很完美，却是目前此类效果使用最为广泛的交互方式。不管是网易邮箱的登录，还是淘宝的搜索等等，都采用这种方式去处理文本提示。 这种结构的优点很明显，提示文本可以有更为丰富的表现形式，而且不影响表单校验，交互上更容易统一，可定制性更强。在一些设计感很强的页面中很能发挥作用。
缺点嘛，大致有这么几点，一是依赖dom结构，布局不够简洁，二是需要监听浏览器的默认行为，实现起来要考虑不同的事件。
上面就是小剧整理的三种关于placeholder的实现方式，在项目中小剧一般采用第三种方案。因为当效果封装好且可复用的时候，既能机械式的引用减少开发时间，又能很顺利的满足产品需求，是件很能愉悦自己苦逼生活的事情。
当然，可能关于这类问题，你也有自己的一套想法或者实现方案，不妨说出来，惊呆我和我的小伙伴们吧！