項目中遇到的問題，試了幾種方法，今天整理出來，如果有不合適的地方，希望大家多多提意見。
- 第一種方法是：使用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>
結束語：這幾種方法是目前親測過，第一種以及第二種是比較合適的方法，第三種方法，樓主感覺還是有一點問題，希望大家測出來問題的，及時與我聯系哈。
第二種實現方法也是可以運行的，但是上次做項目的時候，不知道為什么，單個的頁面運行都沒有問題，放到項目中的話，就會對別的功能造成影響，一直運行不了。因此樓主才重新想了第一種方法。不過第一種方法也是挺好用的。希望大家多多提意見哈