兼容ie瀏覽器的placeholder的幾種方法

時間 2019-11-19

原文原文鏈接

項目中遇到的問題，試了幾種方法，今天整理出來，若是有不合適的地方，但願你們多多提意見。javascript

第一種方法是：使用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的。css

第二種方法:在第二種方法中，咱們使用了判斷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>

結束語：這幾種方法是目前親測過，第一種以及第二種是比較合適的方法，第三種方法，樓主感受仍是有一點問題，但願你們測出來問題的，及時與我聯繫哈。
第二種實現方法也是能夠運行的，可是上次作項目的時候，不知道爲何，單個的頁面運行都沒有問題，放到項目中的話，就會對別的功能形成影響，一直運行不了。所以樓主才從新想了第一種方法。不過第一種方法也是挺好用的。但願你們多多提意見哈html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。