placeholder

html:

<div style="position:relative;">
<input type="password" id="pass1" class="base-input" placeholder=" 请输入您新密码" />
</div>

css:

.phcolor{ color:#999;}

解决input[type='text']

supportPlaceholder='placeholder'in document.createElement('input'),
placeholder=function(input){
var text = input.attr('placeholder'), defaultValue = input.defaultValue;
if(!defaultValue){
input.val(text).addClass("phcolor");
}
input.focus(function(){
if(input.val() == text){
$(this).val("");
}
})
input.blur(function(){
if(input.val() == ""){
$(this).val(text).addClass("phcolor");
}
})

//输入的字符不为灰色
input.keydown(function(){
$(this).removeClass("phcolor");
});
}

//当浏览器不支持placeholder属性时，调用placeholder函数
if(!supportPlaceholder){
$('input').each(function(){
text = $(this).attr("placeholder");
if($(this).attr("type") == "text"){
placeholder($(this));
}
})
}

解决input[type='password']

(function($){
var Placeholder,
inputHolder = 'placeholder' in document.createElement('input'),
Placeholder = {
ini:function () {
if (inputHolder) {
return false;
}
this.el = $(':password[placeholder]');
this.setHolders();
},
setHolders: function(obj){
var el = obj ? $(obj) : this.el;
if (el) {
var self = this;
el.each(function() {
var span = $('<label />');
span.text( $(this).attr('placeholder') );
span.css({
color: '#999',
fontSize: "15px",
fontFamily: $(this).css('fontFamily'),
position: 'absolute',
top: $(this).offset().top + $(this).css("marginTop"),
left: ( parseInt($(this).offset().left) + 30 + parseInt( $(this).css("marginLeft").replace(/px/g,"") ) ) + "px",
width: $(this).width(),
height: $(this).height(),
lineHeight: $(this).height() + 'px',
textIndent: $(this).css('textIndent'),
paddingLeft: $(this).css('borderLeftWidth'),
paddingTop: $(this).css('borderTopWidth'),
paddingRight: $(this).css('borderRightWidth'),
paddingBottom: $(this).css('borderBottomWidth'),
display: 'inline',
overflow: 'hidden'
})
if (!$(this).attr('id')) {
$(this).attr('id', self.guid());
}
span.attr('for', $(this).attr('id'));
$(this).after(span);
self.setListen(this, span);
})
}
},
setListen : function(el, holder) {
if (!inputHolder || !textareaHolder) {
el = $(el);
el.bind('keydown', function(e){
if (el.val() != '') {
holder.hide(0);
} else if ( /[a-zA-Z0-9`~!@#\$%\^&\*\(\)_+-=\[\]\{\};:'"\|\\,.\/\?<>]/.test(String.fromCharCode(e.keyCode)) ) {
holder.hide(0);
} else {
holder.show(0);
}
});
el.bind('keyup', function(e){
if (el.val() != '') {
holder.hide(0);
} else {
holder.show(0);
}

});
el.on("focus",function(e){
if(el.val()==""){
holder.hide(0);
}
});
el.on("blur",function(e){
if(el.val()==""){
holder.show(0);
}
});
}
},
guid: function() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16| 0,
v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
}).toUpperCase();
}

}

$.fn.placeholder = function () {
if (inputHolder && textareaHolder) {
return this;
}
Placeholder.setListen(this);
return this;
}

$.placeholder = Placeholder;

})(jQuery)