1 /*
2 * @author ambar
3 * html5 placeholder pollfill
4 * - 使用绝对定位内嵌层
5 * - 也适用于密码域
6 * 目标浏览器: IE 6~9, FF 3.5
7
8 */
9 (function ($) {
10 var attr = 'nullText';
11
12 $.fn.placeholder = function (options) {
13 return this.each(function () {
14 var $input = $(this);
15 if (typeof options === 'string') {
16 options = { text: options };
17 }
18
19 var opt = $.extend({
20 text: '',
21 style: {},
22 namespace: 'nullText',
23 hideOnFocus: false
24 }, options || {});
25
26 if (!opt.text) {
27 opt.text = $input.attr(attr);
28 }
29
30 var width = $input.width();
31
32 var show = function () { $layer.show(); };
33 var hide = function () { $layer.hide(); };
34 var is_empty = function () { return !$input.val(); };
35 var check = function () { is_empty() ? show() : hide(); };
36
37 var position = function () {
38 var pos = $input.position();
39 if (!opt.hideOnFocus) {
40 // 按鍵隱藏的情况，需要移動光標两像素
41 pos.left += 2;
42 }
43 pos.top += 3;
44 $layer.css(pos);
45 };
46
47 var layer_style = {
48 color: 'gray',
49 cursor: 'text',
50 textAlign: 'left',
51 position: 'absolute',
52 textShadow: 'none',
53 fontSize: $input.css('fontSize'),
54 fontFamily: $input.css('fontFamily'),
55 display: is_empty() ? 'block' : 'none',
56 zIndex: '1000',
57 top: '3px'
58 };
59
60 var package_style = { position: 'relative' };
61
62 // create
63 var layer_props = {
64 text: opt.text,
65 width: width,
66 height: 'auto'
67 };
68
69
70 // 确保只绑定一次
71 var ns = '.' + opt.namespace, $layer = $input.data('layer' + ns);
72 if (!$layer) {
73 $layer = $('<label>', layer_props)
74 .attr('for', $input.attr('id'));
75 $input.data('layer' + ns, $layer);
76 }
77
78 var $package = $("<div></div>").css(package_style);
79 $input.parent().append($package);
80 $package.append($layer).append($input);
81
82 // activate
83 $layer
84 .css($.extend(layer_style, opt.style))
85 .unbind('click' + ns)
86 .bind('click' + ns, function () {
87 opt.hideOnFocus && hide();
88 $input.focus();
89 });
90 $input
91 .unbind(ns)
92 .bind('blur' + ns, check);
93
94 if (opt.hideOnFocus) {
95 $input.bind('focus' + ns, hide);
96 } else {
97 $input.bind('keypress keydown' + ns, function (e) {
98 var key = e.keyCode;
99 if (e.charCode || (key >= 65 && key <= 90)) {
100 hide();
101 }
102 })
103 .bind('keyup' + ns, check);
104 }
105
106 // 由于 ie 记住密码的特性，需要监听值改变
107 // ie9 不支持 jq bind 此事件
108 $input.get(0).onpropertychange = check;
109
110 position();
111 check();
112 });
113 };
114
115 })(jQuery);
116
117
118
119 //调用方法
120 $("[nullText]").placeholder();
