HTML5表单提示placeholder属性兼容IE

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>