当前位置:Web前端 > jquery> 正文

placeholder兼容性

时间:2015-8-25类别:Web前端

placeholder兼容性

placeholder兼容性

placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失。

但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,例如ie9及以下的ie浏览器不兼容这个属性。下面介绍placeholder兼容性的处理

在页面添加如下脚本

 

  • JScript 代码   复制
  • 
    $(function() {
      // 如果不支持placeholder,用jQuery来完成
      if(!isSupportPlaceholder()) {
        // 遍历所有input对象, 除了密码框
        $('input').not("input[type='password']").each(
          function() {
            var self = $(this);
            var val = self.attr("placeholder");
            input(self, val);
          }
        );
        
        /* 对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});
        }
      });
    }
    
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐