placeholder 兼容IE9以下版本 包含pasword
2015-04-03 13:40
337 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> PlaceHolder </title> <style type="text/css"> /* 设置提示文字颜色 */ ::-webkit-input-placeholder { color: #838383; } :-moz-placeholder { color: #838383; } .placeholder { color: #ccc; } </style> </head> <body> <input type="text" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"> 登录用户名、密码文字提示,鼠标离开显示文字 html5 and jquery<br/> <br/> 账号:<input type="text" name="email" placeholder = '用户账号' /><br/> <br/> 密码:<input type="password" name="password" placeholder = '密码' autocomplete="off" /><br/> </body> </html> <script src="http://js.static.m1905.cn/core/jquery-edge.min.js"></script> <script> //判断浏览器是否支持 placeholder属性 function isPlaceholder(){ var input = document.createElement('input'); return 'placeholder' in input; } if(!isPlaceholder()){ //不支持placeholder 用jquery来完成 $("input").not("input[type='password']").each(function(){//把input绑定事件 排除password框 if($(this).val()=="" && $(this).attr("placeholder")!=""){ $(this).val($(this).attr("placeholder")); $(this).focus(function(){ if($(this).val()==$(this).attr("placeholder")) $(this).val(""); }); $(this).blur(function(){ if($(this).val()=="") $(this).val($(this).attr("placeholder")); }); } }); //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换 var pwdField = $("input[type=password]"); var pwdVal = pwdField.attr('placeholder'); pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" />'); var pwdPlaceholder = $('#pwdPlaceholder'); pwdPlaceholder.show(); pwdField.hide(); pwdPlaceholder.focus(function(){ pwdPlaceholder.hide(); pwdField.show(); pwdField.focus(); }); pwdField.blur(function(){ if(pwdField.val() == '') { pwdPlaceholder.show(); pwdField.hide(); } }); } </script>
相关文章推荐
- HTML:IE9及9以下浏览器兼容placeholder(包含密码输入框)
- IE9及以下兼容placeholder
- ie9以下placeholder兼容
- bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5和css3
- [置顶] 让IE9以下的版本兼容HTML5解决方案
- h5兼容ie9以下版本
- 在ie9以下的版本placeholder显示
- jquery 解决ie9及以下版本不支持placeholder属性
- IE9 以下版本浏览器兼容html5
- background兼容IE9以下版本
- 兼容ie10以下版本的placeholder属性
- IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包
- 让IE9以下版本的浏览器兼容HTML5的方法
- 让IE9以下的版本兼容HTML5解决方案
- 仿淘宝搜索框之---ie9以下版本placeholder效果
- bootstrap兼容IE6、7、8版本(IE9以下版本)
- IE9 以下版本浏览器兼容HTML5的方法
- 让IE9以下版本的浏览支持html5标签,CSS3选择器,圆角,投影功能
- Placeholder兼容IE6以及以上版本
- 关于android指纹识别兼容6.0以下版本