生活随笔
收集整理的這篇文章主要介紹了
兼容ie浏览器的placeholder的几种方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
項目中遇到的問題，試了幾種方法，今天整理出來，如果有不合適的地方，希望大家多多提意見。
第一種方法是：使用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> 結束語：這幾種方法是目前親測過，第一種以及第二種是比較合適的方法，第三種方法，樓主感覺還是有一點問題，希望大家測出來問題的，及時與我聯系哈。
?第二種實現方法也是可以運行的，但是上次做項目的時候，不知道為什么，單個的頁面運行都沒有問題，放到項目中的話，就會對別的功能造成影響，一直運行不了。因此樓主才重新想了第一種方法。不過第一種方法也是挺好用的。希望大家多多提意見哈
轉載于:https://www.cnblogs.com/maxiaodan/p/5337213.html
總結
以上是生活随笔為你收集整理的兼容ie浏览器的placeholder的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
