兼容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