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 = 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的兼容问题的更多相关文章
- 使用history.js解决浏览器对history使用的兼容问题
history.js即可以解决禁止浏览器回退的浏览器兼容问题,也能解决直接修改浏览器当前标签页url的浏览器兼容问题. 解决禁止浏览器回退: <script src="../../js ...
- js解决IE8不支持html5,css3的问题(respond.js 的使用注意)
IE8.0及以下不支持html5,css3的解析.目前为止IE8以下的版本使用率在10%左右,网站还是有必要兼容的. 1,在你的所有css最后判断引入两个js文件. html5.js 是用来让ie8 ...
- 解决IE8的兼容问题
本文分享下我在项目中积累的IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK ...
- placeholder不兼容 IE10 以下版本的解决方法
对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...
- placeholder的兼容处理(jQuery下)
这是一个老问题,结合前辈们的经验,需要处理的问题有一下几个. 1.只有输入框(input/textarea)下的palaceholder属性存在的时候才需要处理这类兼容 2.处理好输入框上焦点和是焦点 ...
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
-----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- IE6-7下margin-bottom不兼容解决方法(非原创,视频中看到的)
在IE低版本下有很多不兼容,现在将看到的 IE6-7下margin-bottom不兼容解决方法 演示一下,方便日后自己查阅. <!DOCTYPE html> <html la ...
- 解决IE8下opacity属性失效问题,无法隐藏元素
解决IE8下opacity属性失效问题 由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...
随机推荐
- c语言简易文法
<程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...
- UI进阶 跳转系统设置相关界面的方法
跳转系统设置界面,例如提示用户打开定位.蓝牙或者WIFI,提醒用户打开推送或者位置权限等 在iOS6之后,第三方应用需要跳转系统设置界面,需要在URL type中添加一个prefs值,如下图: 跳转系 ...
- 【树莓派】 Failed to fetch http://mirrordirector.raspbian.org/raspbian/pool/main/c/chkconfig/chkconfig_11.4.54.60.1debian1_all.deb Could not resolve 'mirrordirector.raspbian.org'
在安装chkconfig的过程中,遇到如下问题: haochuang@raspberrypi:~/webapp $ sudo apt-get install chkconfigReading pack ...
- python pyqt4 ide eric安装
注意事项 关于python,pyqt的版本 笔者安装的是eric,原来电脑安装的是64位的python,32位的pyqt4,导致系统找不到pyqt,后来更换python版本为32搞定,猜测pyqt的版 ...
- iOS - iOS 应用
1.Xcode 项目属性 Product Name 软件名称.产品名称.项目名称 Organization Name 公司名称.组织名称 Organization Identifier 公司的唯一标识 ...
- GCC for Win32开发环境介绍
http://blog.csdn.net/VisionCat/article/details/711693 http://blog.csdn.net/VisionCat/article/categor ...
- js 刷新窗口
在js 方法里面 1.window.opener.location.reload() 刷新父窗口 2.window.location.reload() 该方法强迫浏览器刷新当前 ...
- 配置sublime text 3 的Python开发环境
为了在sublime实现像Python自带idle一样的F5交互功能: 首先安装package control然后install Sublime REPL:然后配置 Preference-->P ...
- 发生tcp丢包(拥堵、超时)重传
可以根据wireshark的Seq序列号和Ack序列号来进行详细分析. 可见,网络丢包(可能是网络拥堵.也有可能是骨干网上有"防火墙"故意随机丢包,因为这个服务器的IP放在国外)对 ...
- curl上传图片文件
为了优化网站,需要做静态化和,图片分离 暂时想到的方式是: 1,php//input 流方式上传到远程服务器 2,阿里云oss收费服务 3,curl上传图片 4,phpftp上传图片 5, 服务器同 ...