js解决IE8、9下placeholder的兼容问题

由于placeholder是html5的新属性,在IE8、IE9下是不能显示的,有兼容性问题。

解决思路:

1.判断目前浏览器是否支持placeholder属性

2.若不支持,则将type="text"的input标签的value值设置为placeholder的值,模拟placeholder效果;若是type="password",则添加一个type="password"的input元素模拟。

代码:

<div>
    <input id="account"  style="height: 45px; padding: 6px 25px; line-height: 31px" type="text" class="form-control" placeholder="用户名/手机号" >
</div>
<div id="pwdDiv">
    <input id="password"  style="height: 45px; padding:6px 25px; line-height: 31px" type="password" class="form-control" placeholder="密码">
</div>
 (function($){
        //判断浏览器是否支持placeholder属性
        var supportPlaceholder = ‘placeholder‘in document.createElement(‘input‘);
        //初始化
        var placeholder = function(input){
            var text = input.attr(‘placeholder‘);
            var defaultValue = input.defaultValue;
            if(!defaultValue && input.attr(‘type‘) == "text"){
                input.val(text);
            }
        };
        //当浏览器不支持placeholder属性时,调用placeholder函数
        if(!supportPlaceholder){
            $(‘<input id="showpwd"  style="height: 45px; padding:6px 25px;line-height: 31px" type="text" class="form-control" placeholder="密码">‘).appendTo(‘#pwdDiv‘);
            $(‘#password‘).hide();
            $(‘input‘).each(function(){
                placeholder($(this))
            });
            $("input").focus(function () {
                var placeTexr=$(this).attr("placeholder");
                var value = $(this).attr("value");
               // alert(placeTexr);
                if($(this).attr("id") == "showpwd"){
                    $(this).hide();
                    $(‘#password‘).show().focus();
                }else if($(this).attr("type") == "text" && $(this).val() ==placeTexr ){
                    $(this).val("");
                }
            });
            $("input").focusout(function () {
                var placeTexr=$(this).attr("placeholder");
                var test=$(this).val();
                if($(this).attr("id") == "password" && $(this).val() == ""){
                    $(this).hide();
                    $(‘#showpwd‘).show();
                }
                if($(this).attr("type") == "text" && $(this).val() =="" ){
                    $(this).val(placeTexr);
                }
            });
        }
    })($);
时间: 2024-09-30 20:17:30

js解决IE8、9下placeholder的兼容问题的相关文章

js解决IE8不支持html5,css3的问题(respond.js 的使用注意)

IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js  是用来让ie8浏览器能将h5标签转化为块元素 respond.js   是让ie8支持css3的js <!--[if lt IE9]> <script src="html5.js"></script> <script src="Respond.js&q

解决IE8浏览器下背景图片无法拉伸(铺满)的问题

IE8浏览器不兼容这种写法: 1 body{ 2 background-image:url(1.jpg); 3 background-size:cover; 4 background-repeat:no-repeat; 5 } 6 7 <body> 8 </body> 网上找了很多方法,包括使用滤镜什么的都不管用,后来发现其实很简单. 解决方法:使用<img>标签即可,如下: 1 img { 2 position: fixed; 3 width: 100%; 4 hei

解决IE8下不兼容rgba()的解决办法

rgba()是css3的新属性,所以IE8及以下浏览器不兼容,这怎么办呢?终于我找到了解决办法. 解决办法 我们先来解释以下rgba rgba: rgba的含义,r代表red,g代表green,b代表blue,a代表透明度. rgba(0,0,0,.5) 这样就代表了黑色,透明度为0.5 要想解决在IE8下的透明度问题,可以增加这样一句话: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endC

ie中placeholder属性不支持,js解决

ie中placeholder属性不支持,js的解决方法: //placeholder属性在ie下兼容 function placeholder ( pEle , con ) { var pEle = pEle if( pEle.find("input,textarea").val() == "" ){ pEle.append("<i class='placeholder_ie'>"+con+"</i>"

placeholder的兼容处理(jQuery下)

这是一个老问题,结合前辈们的经验,需要处理的问题有一下几个. 1.只有输入框(input/textarea)下的palaceholder属性存在的时候才需要处理这类兼容 2.处理好输入框上焦点和是焦点的文本显示 3.密码输入框比较特殊,因为为其设置显示文本时显示的是一串“***”.这个问题后面分析.处理好前两点还是比较简单的,处理源码为如下 var browserSupport = { placeholder: 'placeholder' in document.createElement('i

placeholder不兼容 IE10 以下版本的解决方法

对于密码输入框placeholder的兼容问题: HTML代码: <input type="password" id="loginPassword" placeholder="密码(6-16位字母数字)" class="width270"> <input type="text" passwordMask="true" placeholder="密码(6-16位

java压缩去除html空格和换行解决微信域名下不兼容

直接贴代码. java压缩去除html空格和换行解决微信域名下不兼容 调用:content = HtmlCompressor.compress(content); import java.io.StringReader;import java.io.StringWriter;import java.util.*;import java.util.regex.*; /******************************************* * 压缩jsp,html中的代码,去掉所有空

IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在父标签中加入overflow:hidden:或zoom:100%示例代码: 不正常显示 ul{} li{ list-style:none; float:left; margin:10px;} 1. 你会发现左边10px 变成20px了, 解决办法:在li的CSS中加入:display:inline

[HTML] Google IE-x.js 解决IEx与W3C标准的冲突

如果分别用IE5.IE6.IE7浏览同一个网页,将可能出现不一样的效果.这是它们之间对CSS的解析选择器不一样或错误和个别bug所导致.为了解决这些错误和bug.我们不得不找到一个能平衡于它们之间的解决方法.如png透明问题在IE5.IE6下无法显示出其效果,我们可能会使用CSS hack或者引入外部JavaScript来实现.譬如前面我提到过用pngfix的那个方法就是调用外部JavaScript来解决在IE5.IE6下png透明问题.当然还有更多的方法.而现在有种更加完美的方法能兼容IE5.