兼容ie的placeholder设置

 

html5的placeholder在ie上不被支持，解决的方法

直接在网页里添加

<!--兼容ie的placeholder-->
<script src="static/js/placeholder.js"></script>

就可以了

 1 function isPlaceholder(){
 2  var input = document.createElement('input');
 3  return 'placeholder' in input;
 4 }
 5 
 6 if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
 7  $(document).ready(function() {
 8      if(!isPlaceholder()){
 9          $("input").not("input[type='password']").each(//把input绑定事件 排除password框
10              function(){
11                  if($(this).val()=="" && $(this).attr("placeholder")!=""){
12                      $(this).val($(this).attr("placeholder"));
13                      $(this).focus(function(){
14                          if($(this).val()==$(this).attr("placeholder")) $(this).val("");
15                      });
16                      $(this).blur(function(){
17                          if($(this).val()=="") $(this).val($(this).attr("placeholder"));
18                      });
19                  }
20          });
21          //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
22          var pwdField = $("input[type=password]");
23          var pwdVal  = pwdField.attr('placeholder');
24          pwdField.after('<input id="pwdPlaceholder" type="text" value='+pwdVal+' autocomplete="off" class="form-control" />');
25          var pwdPlaceholder = $('#pwdPlaceholder');
26          pwdPlaceholder.show();
27          pwdField.hide();
28          
29          pwdPlaceholder.focus(function(){
30           pwdPlaceholder.hide();
31           pwdField.show();
32           pwdField.focus();
33          });
34          
35          pwdField.blur(function(){
36           if(pwdField.val() == '') {
37            pwdPlaceholder.show();
38            pwdField.hide();
39           }
40          });
41          
42      }
43  });
44  
45 }
View Code

 

posted @ 2014-08-01 21:29  Ruyn  阅读(323)  评论(0)  编辑  收藏  举报