首页 > 代码库 > js解决IE8、9下placeholder的兼容问题
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 =http://www.mamicode.com/ 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 = http://www.mamicode.com/$(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的兼容问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。