转载自品略网：http://www.pinlue.com/article/2020/03/0710/059990493435.html
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></span>"); $input.removeAttr("placeholder"); if($input.is(":hidden")){ $tip.hide(); } $tip.addClass(classname).text(msg); $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 进行修改。
