jquery placeholder 

  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();

 

posted @ 2014-03-14 12:05  你猜不猜  阅读(686)  评论(0)    收藏  举报