项目中遇到的问题，试了几种方法，今天整理出来，如果有不合适的地方，希望大家多多提意见。
第一种方法是：使用html新增的属性 “data-”来实现的，实现的时候，input框没有使用placeholer这个属性，但是却可以实现一样的效果并且兼容各大浏览器。
<!doctype html><html><head><meta charset="utf-8"><script type="text/javascript" src="jquery-1.10.2.min.js"></script><title></title><style type="text/css" media="screen">.inp {color: #666;}</style></head><body><input name="" datavalue="输入文字" class="ipt"></body><script type="text/javascript">$(function(){function placeholder(target){$(target).val($(target).attr("datavalue")).addClass("inp");$(target).focus(function() {if($(this).val() == $(this).attr("datavalue")) {$(this).val("").removeClass("inp");} })$(target).blur(function(){if($(this).val() == "" || $(this).val() == $(this).attr("datavalue")) {$(this).val($(target).attr("datavalue")).addClass("inp");}})}placeholder(".ipt")})</script></html>
在上述的代码中，我将主要实现的代码封装了一个方法，因此等到下次再要使用的时候，可以直接调用placeholder(".ipt")这个函数即可，输入input的class值。
说明一下：.inp这个class,是为了实现和placeholder一样的显示效果。当使用的是placeholder提示的话，字体得颜色是#666的。
第二种方法:在第二种方法中，我们使用了判断ie浏览器的版本来实现的。我们都知道，placeholder主要是不兼容ie10-以下的版本，所以当用户使用的是ie10-以下的浏览器的时候，我们就会使用一个span标签来模拟提示。
<!doctype html><html><head><meta charset="utf-8"><script type="text/javascript" src="jquery-1.10.2.min.js"></script><title></title><style type="text/css" media="screen">.spn {position: absolute;font-size: 14px;left: 10px;top: 9px;display: none;color:#666;}</style></head><body><input type="text" name="" placeholder="输入文字" class="ipt"><span class="spn">输入文字</span></body>
<script type="text/javascript"> $(function(){ function placeholder(target){ var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0" || browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0" || browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0") { $(target).siblings("span").show(); $(target).focus(function() { $(this).siblings("span").hide(); }) $(target).blur(function(){ if($(this).val() == "") { $(this).siblings("span").show(); } }) } } placeholder(".ipt") }) </script>
</html>
第三种方法：第三种方法使用了 浏览器判断是否支持placeholder属性，如果支持的话，就是正常显示就好了。如果不支持，会调用placeholder函数，当input框获得焦点时，比较input框的值是否等于默认值，如果等于，则置空。当input框失去焦点的时候，如果input框的值为空，则将保存的默认值赋值给它。并且添加class将字体颜色设为#666.当在input框输入值的时候，移除phcolor这个class，输入的字符不是灰色的。
<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><script type="text/javascript" src="jquery-1.10.2.min.js"></script><style type="text/css">.phcolor{color:#666;}.box {position:relative;font-size: 14px;}.box span{position: absolute;left: 0px;font-size: 14px;display: none;}</style></head><body><div class="box"><input class="ipt" placeholder="输入文字" type="text"></input><span class="ipt_abs">输入文字</span></div></body><script type="text/javascript">$(function(){//判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('input');placeholder=function(input){var text = input.attr('placeholder');defaultValue = input.defaultValue;if(!defaultValue){input.val(text).addClass("phcolor");}input.focus(function(){if(input.val() == text){$(this).val("");}})input.blur(function(){if(input.val() == ""){$(this).val(text).addClass("phcolor");}});//输入的字符不为灰色 input.keydown(function(){$(this).removeClass("phcolor");})}//当浏览器不支持placeholder属性时，调用placeholder函数if(!supportPlaceholder){$('input').each(function(){text = $(this).attr("placeholder");if($(this).attr("type") == "text"){placeholder($(this));}})}})</script></html>
结束语：这几种方法是目前亲测过，第一种以及第二种是比较合适的方法，第三种方法，楼主感觉还是有一点问题，希望大家测出来问题的，及时与我联系哈。
第二种实现方法也是可以运行的，但是上次做项目的时候，不知道为什么，单个的页面运行都没有问题，放到项目中的话，就会对别的功能造成影响，一直运行不了。因此楼主才重新想了第一种方法。不过第一种方法也是挺好用的。希望大家多多提意见哈
