QQ邮箱登陆(http://mail.qq.com) 如下截图啦：
我在上面一个demo类似原理上做了下修改，制作了一个这样子交互效果的demo，希望对有兴趣的同行能帮上点忙，您可以狠狠地点击这里：透明度变化的占位符交互demo
上面的demo必须在不支持placeholder属性的浏览器下才看得到效果。下截图来自IE9浏览器：
同样的，相关代码参考demo页面。同样是覆盖形式的label元素，右键上下文是有问题的。
最后，附上一个结合了上面诸如讨论的placeholder模拟插件 – jquery.placeholder.js（很小，加上注释一百多行）
是自己今儿个晚上冒着家庭不和睦的危险写的（元宵节啊，晚饭后跑公司来了），急急忙忙，简单测试了下，日后有些bug再修补修补。
使用 1. JS部分 如下最简单示例：
<script src="jquery1.7.1-min.js"></script> <script src="jquery.placeholder.js"></script> <script> $(function() { $("#test").placeholder(); }); </script>2. 对应HTML 上面脚本对应HTML代码如下：
<input id="test" placeholder="测试" />参数 插件相关参数参见下表：
标题描述默认labelMode布尔型 是否使用label标签模拟占位符效果。默认为false，表示使用value模拟法falselabelStyle对象 如果使用label模拟法，则创建的label元素重置的或新的样式集{}labelAlpha布尔型 如果使用label模拟法，其交互方式是否使用透明度切换的形式。默认为false，表示使用值显示与不显示这种交互falselabelAcross布尔型 如果使用label模拟法，同时交互方式是透明度切换，是否让所有的浏览器都是这种效果（重置现代浏览器默认placeholder交互效果）。默认为false，表示浏览器默认使用自带placeholder交互效果。false实例页面 您可以狠狠地点击这里：jquery.placeholder.js插件简单测试demo
小小demo页面截图一张（后因次日添加了如何让“label提示文字在文本框下方显示”实例，因此demo实际模样与下面有些小出入）：
说明
插件支持value模拟法和label模拟法；而且label模拟法支持新式的透明度交互效果；而且可以设置是否让FireFox, Chrome这些浏览器也以这种形式交互。使用label模式模拟占位符的时候，如果文本控件没有id，则插件会自动创建一个随机id.因为考虑到插件化，让插件藏在元素底部是不显示的（因为不能强行设置文本控件背景透明），因此插件的label元素都是覆盖在文本控件上模拟占位符效果的。因此，右键上下文是有问题的。插件对此所做的处理就是把占位符上下文的事件给墙掉了。您可以通过labelStyle参数改变占位符label元素的层级啊，位置什么的完善这个小问题。事件仓促，bug肯定有。如果有幸被您使用了，同时发现了问题，欢迎提交bug.
原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址：http://www.zhangxinxu.com/wordpress/?p=2169
转载于:https://www.cnblogs.com/Better-Me/p/4353906.html
