由于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. python进阶(四)---需要了解的魔法方法

    以下内容,源于个人理解所得,纯属臆测,爱信不信:-D.欢迎大家留言讨论指正. 1.__new__魔法方法: 原型:__new__(cls, *args, **kwargs) 说明:__new__魔法方 ...

  2. Sprint(第十二天11.25)

  3. [Linux]cmd to use

    0x01 Linux Perfermance Analysis in 60s 1> uptime ---load averages 2> dmesg -r | tail ---kernel ...

  4. PHP中的逻辑运算符的优先级

    在三元运算中(expr1)?(expr2):(expr3); and,or,xor的优先级要小于三元运算符,所以需要添加括号例:如果$a为true,$b为fals,$a and $b?"tr ...

  5. html在一个页面显示另一个页面的部分内容

    老板今天让在网站上面显示实时监控画面,研究了一早,找了个简单的方法 先把监控分享在网上(我使用的海康威视摄像头,分享到萤石直播http://square.ys7.com/square/index.js ...

  6. 基于ubuntu 14搭建nginx+php+mysql环境

    基于最新的Ubuntu 14.04(2014年9月)搭建nginx.php.mysql环境, 以下全部命令行操作: 1 由于需要大量的权限操作,方便起见临时提升权限,使用root账号 sudo su ...

  7. python成长之路【第十一篇】:网络编程之线程threading模块

    一.threading模块介绍 threading 模块建立在 _thread 模块之上.thread 模块以低级.原始的方式来处理和控制线程,而 threading 模块通过对 thread 进行二 ...

  8. Android的系统体系结构

    目录: Android的系统体系结构 Android的四种常用组件 Activity的启动流程 Android的系统体系结构 在入门了一个简单的Android的Hello World以后,我们首先来看 ...

  9. Tomcat7.0安装配置

    很久没有通过博客对学习所得进行记录了. 现在将使用Tomcat的一些经验和心得写到这里,作为记录和备忘.如果有朋友看到,也请不吝赐教. 首先,我个人使用的是apache-tomcat-7.0.27你可 ...

  10. redsocks 将socks代理转换成全局代理

    redsocks 需要手动下载编译.前置需求为libevent组件,当然gcc什么的肯定是必须的. 获取源码 git clone https://github.com/darkk/redsocks 安 ...