首页 > 代码库 > input 的 placeholder属性在IE8下的兼容处理
input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性，在使用的时候有两个问题：
1、IE8 下不兼容
处理思路：
如果浏览器不识别placeholder属性，给input添加类名placeholder，模仿placeholder属性的样式，并给input 的value赋值placeholder属性的值
2、 input的type属性是password的情况，用上面的方法处理提示语为密码文
处理思路：
新添加一个标签，模仿placeholder属性
直接上代码：
css部分：
1 .input-item { 2 position: relative; 3 margin: 10px; 4 } 5 .pwd-place { 6 position: absolute; 7 top: 0; 8 left: 72px; 9 width: 100%;10 height: 100%;11 font-size: 12px;12 }
html部分：
1 <form action="#"> 2 <div class="input-item"> 3 <label for="userName">用户名：</label> 4 <input class="username" id="userName" type="text" placeholder="请输入用户名"> 5 </div> 6 <div class="input-item"> 7 <label for="pwd">密码：</label> 8 <input class=" password" id="pwd" type="password" placeholder="请输入密码"> 9 <span class="pwd-place"></span>10 </div>11 12 </form>
js部分：
1 <script src="http://www.mamicode.com/jquery-1.11.3.js"></script> 2 <script> 3 function placeholder(el){ 4 5 function isPlaceholer(){ 6 var input = document.createElement("input"); 7 return "placeholder" in input; 8 } 9 10 var $el = $(el);11 if( isPlaceholer()==false && !(‘placeholder‘ in document.createElement(‘input‘)) ){12 13 $(‘input[placeholder],textarea[placeholder]‘).each(function(){14 var that = $(this),15 text= that.attr(‘placeholder‘);16 if(that.val()===""){17 if(that.attr("type") == "password"){18 $el.html("请输入密码");19 }else {20 that.val(text).addClass(‘placeholder‘);21 }22 }23 that.focus(function(){24 if($el.html() == text){25 $el.html("");26 }27 if(that.val()===text) {28 that.val("").removeClass(‘placeholder‘);29 30 }31 })32 .blur(function(){33 if(that.val()==="") {34 if (that.attr("type") == "password") {35 $el.html("请输入密码");36 37 }else {38 that.val(text).addClass(‘placeholder‘);39 }40 }41 })42 .closest(‘form‘).submit(function(){43 if(that.val() === text){44 that.val(‘‘);45 }46 });47 });48 }49 }50 $(document).ready(function() {51 placeholder(".pwd-place")52 });53 </script>
input 的 placeholder属性在IE8下的兼容处理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。