由于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. 双十一 VS 火车票(12306)

    火车票开售了,又是一年,code了一年,咱们也该回顾回顾了. 还记得12306上线之初各种技术大牛给人家出方案,吐槽人家外包费用?我们来回顾回顾. 就园子里都过千篇文章来侃这事儿,请问有多少主题的文章 ...

  2. sizeof、strlen、字符串、数组,整到一块,你还清楚吗?

    写在前面 sizeof.strlen.字符串.数组,提到这些概念,相信学过C语言的人都能耳熟能详,也能谈得头头是道,但是,在实际运用中,当这些内容交织在一起时,大家却不一定能搞地清清楚楚,本文的目的正 ...

  3. spring-事物-jdbc-hibernate

  4. 企业办公3D指纹考勤系统解决方案

    员工准时.正常出勤是企业考勤制度的基本要求,然而目前签名式.卡钟式.IC卡考勤系统均存在代打卡.人情卡.不易统计等漏洞,而市面上的光学指纹考勤机存在识别能力差.识别速度慢.使用寿命短.不能完全杜绝指纹 ...

  5. requirejs加载css样式表

    1. 在 https://github.com/guybedford/require-css 下载到require-css包 2. 把css.js或者css.min.js复制到项目的js目录下 3. ...

  6. Jekyll教程——精心收藏

    以前总想搭建一个自己的个人网站,由于不懂php后台,所以在点点网开过自己的博客,后来慢慢向程序员转变,点点网的博客已经不能满足这个职业特定的需求,于是用worldpress搭建了自己的第一个网站,鼓捣 ...

  7. scss编译

    SASS?SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. sass有两种后缀名文件: sass(不使用大括号和分号)---不建议使用 ...

  8. shell中三种引号的用法

    1.单引号 所见即所得 例如:var=123 var2='${var}123' echo var2 var2结果为${var}123 2.双引号 输出引号中的内容,若存在命令.变量等,会先执行命令解析 ...

  9. 给ListBox每项加图标

    先设置listBoxMsg.DrawMode = DrawMode.OwnerDrawFixed; private void listBoxMsg_DrawItem(object sender, Dr ...

  10. Oralce 账户被锁后的解决办法

    SQL> connect sys/sys as sysdba; 已连接. SQL> alter user system account unlock; 用户已更改.  www.2cto.c ...