html:

 

<div style="position:relative;">

   <input type="password" id="pass1" class="base-input" placeholder=" 请输入您新密码" />

</div>

 

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 = $('');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)