正文
【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
placeholder 是 html5 新增加的属性，主要提供一种提示（hint），用于描述输入域所期待的值。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。placeholder 属性适用于以下类型的 input 标签：text, search, url, telephone, email 以及 password。
我们先看下在谷歌浏览器中的效果，如图所示：
获得焦点时：
输入字段：
因为是 html5 属性，自然低版本的浏览器比如 ie6-8 不兼容。下面就介绍下如何在低版本浏览器中显示以上效果，话不多说直接上代码。
html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>基于 jquery 实现 ie 浏览器兼容 placeholder 效果</title>
<style>
*{margin:0;padding:0;}
.txt{position:relative;font-size:12px;margin:10px;}
.txt input{border:1px solid #ccc;height:30px;line-height:30px;padding:0 10px;width:200px;}
.txt .txt-tip{color:#999;position:absolute;left:10px;top:0;height:32px;line-height:34px;}
</style>
</head>
<body>
<div class="txt">
<input type="text" value=""/>
</div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/placeholder.js"></script>
<script>
$(function(){
var $input = $('.txt input');
initPlaceholder($input, '请输入内容', 'txt-tip');
});
</script>
placeholder.js：
function initPlaceholder($input, msg, classname){
var isIE = !!window.ActiveXObject || 'ActiveXObject' in window;
var isPlaceholder = 'placeholder' in document.createElement('input');
if(isPlaceholder && !isIE){
$input.attr('placeholder', msg);
}else{
var $tip = $('<span class="' + classname + '">' + msg + '</span>');
$input.after($tip);
$.data($input[0], 'tip', $tip);
if($input.val() != ''){
hidePHTip($input);
}
dealPHTip($input, $tip);
}
}
function hidePHTip($input){
var $tip = $.data($input[0], 'tip');
if($tip){
$tip.hide();
}
}
function dealPHTip($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);
});
}
实现原理：首先过滤下浏览器，非 ie 浏览器并且支持 placeholder 属性就用 placeholder，ie 浏览器则用 span 代替 placeholder 文本内容，通过样式定位在 input 上方，同时监听 input 输入框值的变化来判断显示或隐藏 span。
我们来看下 ie6 浏览器中的效果：
获得焦点时：
输入字段：
可以看到和谷歌浏览器的效果是一致的，唯一不足的就是文字没有居中，可以通过 css 进行修改。
