h5新属性placeholder对ie10以下的ie浏览器做兼容性

    $(function() {
    	  // 如果不支持placeholder,用jQuery来完成
    	  if(!isSupportPlaceholder()) {
    	    // 遍历所有input对象, 除了密码框
    	    $('input').not("input[type='password']").each(
    	      function() {
    	        var self = $(this);
    	        var val = self.attr("placeholder");
    	        input(self, val);
    	      }
    	    );
    		$("#userName").blur(function(){//ie10以下css样式
    			if($('#userName').val()=='用户名'){
    			
    			$('.loginBar .txt1').css({
    				'color':'#a9a9a9'
    			});
    			};
       });
    	
    	    /* 对password框的特殊处理
    	     * 1.创建一个text框 
    	     * 2.获取焦点和失去焦点的时候切换
    	     */
    	    $('input[type="password"]').each(
    	      function() {
    	        var pwdField    = $(this);  
    	        var pwdVal      = pwdField.attr('placeholder');  
    	        var pwdId       = pwdField.attr('id');  
    	        // 重命名该input的id为原id后跟1
    	        pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');  
    	        var pwdPlaceholder = $('#' + pwdId + '1');  
    	        pwdPlaceholder.show();  
    	        pwdField.hide();  
    	          
    	        pwdPlaceholder.focus(function(){  
    	          pwdPlaceholder.hide();  
    	          pwdField.show();  
    	          pwdField.focus();  
    	        });  
    	          
    	        pwdField.blur(function(){  
    	          if(pwdField.val() == '') {  
    	            pwdPlaceholder.show();  
    	            pwdField.hide();  
    	          }  
    	        });  
    	      }
    	    );
    	  }
    	});

    	// 判断浏览器是否支持placeholder属性
    	function isSupportPlaceholder() {
    	  var input = document.createElement('input');
    	  return 'placeholder' in input;
    	}

    	// jQuery替换placeholder的处理
    	function input(obj, val) {
    	  var $input = obj;
    	  var val = val;
    	  $input.attr({value:val});
    	  $input.focus(function() {
    	    if ($input.val() == val) {
    	      $(this).attr({value:""});
    	    }
    	  }).blur(function() {
    	    if ($input.val() == "") {
    	            $(this).attr({value:val});
    	    }
    	  });
    	};

  

posted @ 2017-03-20 09:16  一人的代码  阅读(346)  评论(0编辑  收藏  举报