placeholder

html:
 

 
css:
.phcolor{ color:#999;}
 
解決input[type='text']

 1 supportPlaceholder='placeholder'in document.createElement('input'),
 2          placeholder=function(input){
 3            var text = input.attr('placeholder'), defaultValue = input.defaultValue;
 4            if(!defaultValue){
 5              input.val(text).addClass("phcolor");
 6            }
 7            input.focus(function(){
 8              if(input.val() == text){
 9                $(this).val("");
10              }
11            })
12            input.blur(function(){
13              if(input.val() == ""){
14                $(this).val(text).addClass("phcolor");
15              }
16            })
17         
18            // 
19            input.keydown(function(){
20              $(this).removeClass("phcolor");
21            });
22          }
23         
24          // placeholder ， placeholder 
25          if(!supportPlaceholder){
26            $('input').each(function(){
27              text = $(this).attr("placeholder");
28              if($(this).attr("type") == "text"){
29                placeholder($(this));
30              }
31            })
32          }

 
解決input[type='password']

 1 (function($){
 2     var Placeholder,
 3         inputHolder = 'placeholder' in document.createElement('input'),
 4     Placeholder = {
 5         ini:function () {
 6             if (inputHolder) {
 7                 return false;
 8             }
 9             this.el = $(':password[placeholder]');
10             this.setHolders();
11         },
12         setHolders: function(obj){
13             var el = obj ? $(obj) : this.el;
14             if (el) {
15                 var self = this;
16                 el.each(function() {
17                     var span = $('<label />');
18                     span.text( $(this).attr('placeholder') );
19                     span.css({
20                         color: '#999',
21                         fontSize: "15px",
22                         fontFamily: $(this).css('fontFamily'),
23                         position: 'absolute',
24                         top: $(this).offset().top + $(this).css("marginTop"),
25                         left: ( parseInt($(this).offset().left) + 30 + parseInt( $(this).css("marginLeft").replace(/px/g,"") ) ) + "px",
26                         width: $(this).width(),
27                         height: $(this).height(),
28                         lineHeight: $(this).height() + 'px',
29                         textIndent: $(this).css('textIndent'),
30                         paddingLeft: $(this).css('borderLeftWidth'),
31                         paddingTop: $(this).css('borderTopWidth'),
32                         paddingRight: $(this).css('borderRightWidth'),
33                         paddingBottom: $(this).css('borderBottomWidth'),
34                         display: 'inline',
35                         overflow: 'hidden'
36                     })
37                     if (!$(this).attr('id')) {
38                         $(this).attr('id', self.guid());
39                     }
40                     span.attr('for', $(this).attr('id'));
41                     $(this).after(span);
42                     self.setListen(this, span);
43                 })
44             }
45         },
46         setListen : function(el, holder) {
47             if (!inputHolder || !textareaHolder) {
48                 el = $(el);
49                 el.bind('keydown', function(e){
50                         if (el.val() != '') {
51                             holder.hide(0);
52                         } else if ( /[a-zA-Z0-9`~!@#\$%\^&\*\(\)_+-=\[\]\{\};:'"\|\\,.\/\?<>]/.test(String.fromCharCode(e.keyCode)) ) {
53                             holder.hide(0);
54                         } else {
55                             holder.show(0);
56                         }
57                 });
58                 el.bind('keyup', function(e){
59                         if (el.val() != '') {
60                             holder.hide(0);
61                         } else {
62                             holder.show(0);
63                         }
64 
65                 });
66                 el.on("focus",function(e){
67                     if(el.val()==""){
68                         holder.hide(0);
69                     }
70                 });
71                 el.on("blur",function(e){
72                     if(el.val()==""){
73                         holder.show(0);
74                     } 
75                 });
76             }
77         },
78         guid: function() {
79             return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
80                 var r = Math.random()*16| 0,
81                     v = c == 'x' ? r : (r&0x3|0x8);
82                 return v.toString(16);
83             }).toUpperCase();
84         }
85         
86     }
87 
88     $.fn.placeholder = function () {
89         if (inputHolder && textareaHolder) {
90             return this;
91         }
92         Placeholder.setListen(this);
93         return this;
94     }
95 
96     $.placeholder = Placeholder;
97 
98 })(jQuery)