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="100px;height:30px;"> <input type="text" name="" id="ss" style="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'});