使用jQuery解决IE9以下无法支持input的placeholder的问题

最新推荐文章于 2020-09-11 14:56:41 发布

cc蒲公英

最新推荐文章于 2020-09-11 14:56:41 发布

阅读量3k

点赞数

文章标签： placeholder兼容IE

placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。然而PC端页面也常常需要用到这个属性，效果表现为当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。
要如何解决ie9以下浏览器无法支持的问题呢，可参考天下手游官网： http://tx.163.com/index.html

大概的代码如下：

 
   
        < 
        form 
         method 
        = 
        "post" 
         class 
        = 
        "ios_form" 
        > 
       
 
             
        < 
        input 
         type 
        = 
        "text" 
         class 
        = 
        "text urs-id" 
         placeholder 
        = 
        "网易通行证" 
        /> 
       
 
             
        < 
        input 
         type 
        = 
        "text" 
         class 
        = 
        "text phone-num" 
         placeholder 
        = 
        "手机号码" 
         maxlength 
        = 
        "11" 
        /> 
       
 
             
        < 
        input 
         type 
        = 
        "text" 
         class 
        = 
        "text code" 
         placeholder 
        = 
        "输入验证码" 
         maxlength 
        = 
        "6" 
        /> 
       
 
             
        < 
        a 
         href 
        = 
        "javascript:;" 
         class 
        = 
        "code-img" 
         id 
        = 
        "getIosCode" 
        >获取验证码</ 
        a 
        > 
       
 
             
        < 
        a 
         href 
        = 
        "javascript:;" 
         class 
        = 
        "submitBtn" 
        >提交</ 
        a 
        > 
       
 
        </ 
        form 
        > 
       
 
 

 
        var 
         Placeholer =  
        function 
        (){ 
       
        //判断是否支持placeholder 
       
        function 
         isPlaceholer() { 
       
        return 
         'placeholder' 
         in 
         document.createElement( 
        'input' 
        ); 
       
        } 
       
        //取位置和宽高 
       
        function 
         getOffset($obj) { 
       
        var 
         offset = $obj.offset(); 
       
        return 
         { 
       
        left: $obj.position().left, 
       
        top: $obj.position().top, 
       
        wid: $obj.width(), 
       
        hei: $obj.height() 
       
        } 
       
        } 
       
        $.fn.extend({ 
       
        placeholder:  
        function 
        () { 
       
        if 
         (!isPlaceholer()) { 
       
        $( 
        this 
        ).each( 
        function 
        (index, elem) { 
       
        var 
         $input = $(elem), 
       
        $label =$( 
        '<label class="labelPlaceholder labelPlaceholder' 
         +(index+1)+  
        '">' 
         + $input.attr( 
        'placeholder' 
        ) +  
        '</label>' 
        ), 
       
        offset = getOffset($input), 
       
        styleParams = { 
       
        'width' 
        : offset.wid, 
       
        'height' 
        : offset.hei, 
       
        'position' 
        :  
        'absolute' 
        , 
       
        'left' 
        : offset.left, 
       
        'top' 
        : offset.top 
       
        }; 
       
        if 
        ($input[0].nodeName ===  
        'INPUT' 
        ){ 
       
        styleParams.lineHeight = offset.hei +  
        'px' 
        ; 
       
        var 
         _index = $input.index( 
        'input' 
        )+1, 
       
        _className =  
        '.labelPlaceholder' 
        +_index; 
       
        } 
        else 
        { 
       
        var 
         _index = $input.index( 
        'textarea' 
        )+1, 
       
        _className =  
        'labelTextAreaPlaceholder' 
        +_index; 
       
        $label.addClass(_className); 
       
        _className =  
        '.' 
         + _className; 
       
        } 
       
        $input.parent().find(_className).remove(); 
       
        $input.after($label); 
       
        $label.css(styleParams); 
       
        if 
         ($input.val() !=  
        '' 
        ) { 
       
        $label.hide(); 
       
        } 
       
        $label.click( 
        function 
        () { 
       
        $input.focus(); 
       
        }) 
       
        $input.on( 
        'input propertychange' 
        ,  
        function 
        () { 
       
        if 
         ($( 
        this 
        ) .val() ==  
        '' 
        ) { 
       
        $label.show(); 
       
        }  
        else 
         { 
       
        $label.hide(); 
       
        } 
       
        }).on( 
        'blur' 
        ,  
        function 
        () { 
       
        if 
         ($( 
        this 
        ).val() ==  
        "" 
        ) { 
       
        $label.show(); 
       
        } 
       
        }) 
       
        }); 
       
        } 
       
        } 
       
        }) 
       
        }(); 
       
        $( 
        '.ios_form input' 
        ).Placeholer();