placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
placeholder 属性是 HTML5 中的新属性。
由于它是html5新增的属性，所以在IE低版本中并不被支持，但是为了兼容IE，我们可以实现在文本框上面浮动一个span标签模拟html5的功能！代码实现如下
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="copyright" content=""/>
<title>表单提示</title>
<body>
<div class="" style="width:100px;height:30px;">
<input type="text" name="" id="ss" style="width:100px;height:30px;"/>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
var Utils = {
isIe: !!window.ActiveXObject || 'ActiveXObject' in window,
isPlaceholder: 'placeholder' in document.createElement('input'),
initPlaceholder: function($input,msg,json){
if(this.isPlaceholder && !this.isIe){
$input.attr('placeholder',msg);
}else{
var obj = eval(json);
if(!($input.parent().css("position") == 'relative' || $input.parent().css("position") == 'absolute')){
$input.parent().css("position","relative");//父元素设置相对定位
}
$input.removeAttr('placeholder');
var $tip = $('<span></span>');
if($input.is(':hidden')){
$tip.hide();
}
$tip.css("position","absolute");
$tip.css("left",obj.left+'px');
$tip.css("top",obj.top+'px');
$tip.css("color",obj.color);
$tip.text(msg);
$input.after($tip);
$.data($input[0],'tip',$tip);
if($input.val() != ''){
this.hidePHTip($input);
}
this.dealPHTip($input,$tip);
}
},
hidePHTip: function($input){
var $tip = $.data($input[0],'tip');
if($tip){
$tip.hide();
}
},
dealPHTip: function($input,$tip){
var _deal = function(){
var val = $input.val();
if(val == ''){
$tip.show();
}else{
$tip.hide();
}
};
$tip.click(function(){
$input.focus();
});
$input.on('input propertychange',function(){
clearTimeout(timeout);
var timeout = setTimeout(_deal,0);
});
}
}
Utils.initPlaceholder($('#ss'),'仅限100字',{top:'10',left:'10',color:'#f00'});
</script>
提示插件！二次优化
var Utils = {
isIe: !!window.ActiveXObject || 'ActiveXObject' in window,
isPlaceholder: 'placeholder' in document.createElement('input'),
initPlaceholder: function($input,msg,json){
if(this.isPlaceholder && !this.isIe){
return;
}else{
var obj = eval(json);
if(!($input.parent().css("position") == 'relative' || $input.parent().css("position") == 'absolute')){
$input.parent().css("position","relative");
}
var _h = $input.height();
alert(_h);
var _w = $input.width();
var $tip = $('<span></span>');
if($input.is(':hidden')){
$tip.hide();
}
$tip.css({
'position':'absolute',
'left':'5px',
'top':(_h-6)/2 + 'px',
'font-size':'12px',
'color':obj.color
});
$tip.text(msg);
$input.after($tip);
$.data($input[0],'tip',$tip);
if($input.val() != ''){
this.hidePHTip($input);
}
this.dealPHTip($input,$tip);
}
},
hidePHTip: function($input){
var $tip = $.data($input[0],'tip');
if($tip){
$tip.hide();
}
},
dealPHTip: function($input,$tip){
var _deal = function(){
var val = $input.val();
if(val == ''){
$tip.show();
}else{
$tip.hide();
}
};
$tip.click(function(){
$input.focus();
});
$input.on('input propertychange',function(){
clearTimeout(timeout);
var timeout = setTimeout(_deal,0);
});
},
init: function(json){
$('input[placeholder]').each(function(i){
Utils.initPlaceholder($(this),$(this).attr('placeholder'),json);
});
},
initHasPar:function(parent,json){
parent.find('input[placeholder]').each(function(i){
Utils.initPlaceholder($(this),$(this).attr('placeholder'),json);
});
}
}
Utils.init({color:'#ccc'});
//Utils.initHasPar({color:'#ccc'});