由于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);
}
});
}
})($);

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

  1. 使用history.js解决浏览器对history使用的兼容问题

    history.js即可以解决禁止浏览器回退的浏览器兼容问题,也能解决直接修改浏览器当前标签页url的浏览器兼容问题. 解决禁止浏览器回退: <script src="../../js ...

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

    IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js  是用来让ie8 ...

  3. 解决IE8的兼容问题

    本文分享下我在项目中积累的IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK ...

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

    对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...

  5. placeholder的兼容处理(jQuery下)

    这是一个老问题,结合前辈们的经验,需要处理的问题有一下几个. 1.只有输入框(input/textarea)下的palaceholder属性存在的时候才需要处理这类兼容 2.处理好输入框上焦点和是焦点 ...

  6. JS、jqueryie6浏览器下使用js无法提交表单的解决办法

    -----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...

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

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  8. IE6-7下margin-bottom不兼容解决方法(非原创,视频中看到的)

    在IE低版本下有很多不兼容,现在将看到的   IE6-7下margin-bottom不兼容解决方法   演示一下,方便日后自己查阅. <!DOCTYPE html> <html la ...

  9. 解决IE8下opacity属性失效问题,无法隐藏元素

    解决IE8下opacity属性失效问题   由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...

随机推荐

  1. selenium 封装代码

    package pers.xeon.automate.auxt; import org.openqa.selenium.By; import org.openqa.selenium.WebElemen ...

  2. Mifare系列6-射频卡与读写器的通信(转)

    文/闫鑫原创转载请注明出处http://blog.csdn.net/yxstars/article/details/38085415 1. 复位应答(Answer to request) 读写器呼叫磁 ...

  3. logback 配置详解(一)——logger、root

    1.根节点<configuration>包含的属性 scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文件 ...

  4. django部署

    部署教程 阿里云django部署教程 注意备份Apache2的siteconf文件 细节 环境迁移 如果是修改了注意些requirement文件

  5. .net比较完美的动态注册com组件

    .net中经常需要使用com组件,怎么样注册com组件呢? 一般想到的当然是直接通过系统cmd 调用regsvr32注册程序去注册,如下: regsvr32 name.dll 在.net中可以直接执行 ...

  6. cocos2dx解决苹果正版ipv6的问题

    苹果官方出了新的规定,要求新上架的app都必须单独支持ipv6-only的网络. 具体的要求链接:https://developer.apple.com/library/mac/documentati ...

  7. session、cookie

    session:全局变量组 存放位置:存放在服务器上 用法:相当于一个变量的使用方法,存在于服务器内存上,抓取速度快 主界面: using System; using System.Collectio ...

  8. AF引起的camera偶现卡顿问题

    相关log如下: 01-01 08:04:26.299 867 3220 E Camera2Client: syncWithDevice: Camera 0: Timed out waiting sy ...

  9. php操作redis简单例子

    <?php //在PHP里操作Redis //Redis就是php的一个功能类 //创建Redis对象 $redis = new Redis(); //链接redis服务器 $redis -&g ...

  10. OneProxy添加license

    proxy-license=XXXX-XXXX-XXXX-XXXX 放到proxy.conf中,然后重启proxy