【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);});
}