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

  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>

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

兼容ie浏览器的placeholder的几种方法的更多相关文章

  1. 兼容IE浏览器的placeholder【超不错】

    jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...

  2. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

  3. 清理浏览器网站缓存的几种方法（meta,form表单，ajax）

    1.meta方法   HTML header中加入 <meta http-equiv="pragma" content="no-cache"> 说明 ...

  4. 兼容IE8浏览器移除class样式的方法

    项目中发现,IE8下不兼容JQ的removeClass和addClass,页面无效果 网上找了很多方法都没有效果,最终找到一个很好的笨方法 var div=document.getElementByI ...

  5. 用Fiddler可以设置浏览器的UA 和 手动 --Chrome模拟手机浏览器（iOS/Android）的三种方法，亲测无误！

    附加以一种软件的方法是:用Fiddler可以设置浏览器的UA 以下3种方法是手动的 通过伪装User-Agent,将浏览器模拟成Android设备. 第一种方法:新建Chrome快捷方式 右击桌面上的 ...

  6. CSS让图片垂直居中的几种技巧 三种方法介绍

    在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...

  7. JavaScript数组去重的10种方法

    「数组去重」的确是个老生常谈的问题了,但是你真正的掌握了吗?平时开发中是不是用最简单粗暴的方法来去重?注意到它的性能问题了吗?当面试官对你回答的四个去重方法都不满意时你可以想出更简单且性能能更好的方法 ...

  8. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  9. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. seo从业者发展方向

    对于很多朋友来说,seo就是一项比较简单的技能,内容+外链,就可以基本囊括seo的基本内容了.可能很多朋友对此不屑一顾,会说seo可是包含万象, 你需要懂网页设计.标签设计,分词优化.企业建站等等方面 ...

  2. 为部署ASP.NET Core准备：使用Hyper-V安装Ubuntu Server 16.10

    概述 Hyper-V是微软的一款虚拟化产品,和VMWare一样采用的hypervisor技术.它已经被内嵌到Win10系统内,我们只需要进行简单的安装即可.但是前提是要确保你的机器已经启用虚拟化,可以 ...

  3. C#小知识点记录（QQ交流群的一个小问题）Linq提取数据

    请教 这里 LINQ想 找到 最后的 4条 记录 然后放在 这里这个 List Linq查找怎么写呀? 解答:写了一个小例子作为解答. namespace C_Sharp { class Progra ...

  4. struts1实现简单的登录功能（附源码）

    环境:MyEclipse 14                                                                                     ...

  5. AngularJS创建新指令 - 函数功能

    首先先介绍下AngularJS指令下的几种函数 Link函数和Scope 指令生成出的模板其实没有太多意义,除非它在特定的scope下编译.默认情况下,指令并不会创建新的子scope.更多的,它使用父 ...

  6. Unity UI 基础【译】

    https://unity3d.com/cn/learn/tutorials/topics/best-practices/fundamentals-unity-ui?playlist=30089 理解 ...

  7. 微信公众号、H5、APP三者各有什么优势？

    昨天给大家分享了一个现在很热的H5,众所周知,当下H5手机网站.微信公众号.APP这三种载体都越来越火了,而且三者都有各自的一些优势和劣势. HTML5(H5) H5之所以能引发如此广泛的效应,根本在 ...

  8. [ext4]08 磁盘布局 - CheckSums

    从2012年开始,Ext4和jbd2的元数据中都开始加入checksums.特性标识是metadata_csum.Checksum算法是在super_block中指定: struct ext4_sup ...

  9. CSS3弹性伸缩布局（上）——box布局

    布局简介 CSS3提供了一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box)用来提供一个更加有效的方式实现响应式布局. 由于这种布局还处于W3C的草案阶段,并且它分为 ...

  10. 关于input标签无法对齐的解决方法！

    在布局中发现各个input之间很难对齐,解决方法如下: 将input设置vertical-align属性: vertical-align:middle vertical-align:top verti ...