兼容ie浏览器的placeholder的几种方法

项目中遇到的问题,试了几种方法,今天整理出来,如果有不合适的地方,希望大家多多提意见。

  1. 第一种方法是:使用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的。

  2. 第二种方法:在第二种方法中,我们使用了判断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>
  3. 第三种方法:第三种方法使用了 浏览器判断是否支持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>

    结束语:这几种方法是目前亲测过,第一种以及第二种是比较合适的方法,第三种方法,楼主感觉还是有一点问题,希望大家测出来问题的,及时与我联系哈。
     第二种实现方法也是可以运行的,但是上次做项目的时候,不知道为什么,单个的页面运行都没有问题,放到项目中的话,就会对别的功能造成影响,一直运行不了。因此楼主才重新想了第一种方法。不过第一种方法也是挺好用的。希望大家多多提意见哈

上一篇:[Unity菜鸟] 笔记2 —— 问题篇


下一篇:poj 2031 Building a Space Station(prime )