HTML5 placeholder实际应用经验分享及拓展

QQ邮箱登陆(http://mail.qq.com)
如下截图啦：

我在上面一个demo类似原理上做了下修改，制作了一个这样子交互效果的demo，希望对有兴趣的同行能帮上点忙，您可以狠狠地点击这里：透明度变化的占位符交互demo

上面的demo必须在不支持placeholder属性的浏览器下才看得到效果。下截图来自IE9浏览器：

同样的，相关代码参考demo页面。同样是覆盖形式的label元素，右键上下文是有问题的。

八、综合：placeholder模拟jQuery插件

最后，附上一个结合了上面诸如讨论的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模拟法	false
labelStyle	对象 如果使用label模拟法，则创建的label元素重置的或新的样式集	{}
labelAlpha	布尔型 如果使用label模拟法，其交互方式是否使用透明度切换的形式。默认为false，表示使用值显示与不显示这种交互	false
labelAcross	布尔型 如果使用label模拟法，同时交互方式是透明度切换，是否让所有的浏览器都是这种效果（重置现代浏览器默认placeholder交互效果）。默认为false，表示浏览器默认使用自带placeholder交互效果。	false

实例页面
您可以狠狠地点击这里：jquery.placeholder.js插件简单测试demo

小小demo页面截图一张（后因次日添加了如何让“label提示文字在文本框下方显示”实例，因此demo实际模样与下面有些小出入）：

说明

1. 插件支持value模拟法和label模拟法；而且label模拟法支持新式的透明度交互效果；而且可以设置是否让FireFox, Chrome这些浏览器也以这种形式交互。
2. 使用label模式模拟占位符的时候，如果文本控件没有id，则插件会自动创建一个随机id.
3. 因为考虑到插件化，让插件藏在元素底部是不显示的（因为不能强行设置文本控件背景透明），因此插件的label元素都是覆盖在文本控件上模拟占位符效果的。因此，右键上下文是有问题的。插件对此所做的处理就是把占位符上下文的事件给墙掉了。您可以通过labelStyle参数改变占位符label元素的层级啊，位置什么的完善这个小问题。
4. 事件仓促，bug肯定有。如果有幸被您使用了，同时发现了问题，欢迎提交bug.

 

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2169