由于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. drawable animation

    drawable 动画,帧动画: 1 定义动画xml文件 <?xml version="1.0" encoding="utf-8"?> <an ...

  2. 第一次接触OOM

    前几天机器上一直遇到cpu100%,负载很高,经常报out of memory. 今天机器又遇到了,感觉这个东西无从下手,内存不够,tree看了下cache是不是太多了. 清理了一下,其实占用的不是特 ...

  3. Css 备忘知识点

    1.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 2.HTML5的form如 ...

  4. python成长之路【第十七篇】:玩转jQuery

    一.jQuery简介 1.1.jQuery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototy ...

  5. 慕课网__css_padding && z_index

    一个正方形 对于“内联元素”来说 z-index 静态布局没有z-index作用

  6. NFC

    NFC手机是指带有NFC模块的手机.带有NFC模块的手机可以做很多相应的应用.NFC是Near Field Communication缩写,即近距离无线通讯技术.在13.56MHz频率运行于20厘米距 ...

  7. JQuery_DOM 简介/设置元素及内容

    一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM ...

  8. python学习--字符串

    python的字符串类型为str 定义字符串可以用 ‘abc' , "abc", '''abc''' 查看str的帮助 在python提示符里 help(str) python基于 ...

  9. java覆盖重写规则

    重写规则之一:重写方法不能比被重写方法限制有更严格的访问级别.(但是可以更广泛,比如父类方法是包访问权限,子类的重写方法是public访问权限.) 比如:Object类有个toString()方法,开 ...

  10. HTML5 十大新特性(九)——Web Storage

    H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage. 一.window.sessionStorage--会话级存储 存 ...