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

最新推荐文章于 2022-06-23 22:25:54 发布

cc蒲公英

最新推荐文章于 2022-06-23 22:25:54 发布

阅读量3k

点赞数

文章标签： placeholder兼容IE

本文介绍了一种在不支持HTML5 placeholder属性的IE9及以下浏览器中实现相同效果的方法。通过JavaScript和jQuery扩展功能，为input元素创建一个label标签作为占位符提示，实现了跨浏览器兼容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();