placeholder IE兼容问题

最新推荐文章于 2021-07-06 10:48:59 发布

原创最新推荐文章于 2021-07-06 10:48:59 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

【HTML.CSS】专栏收录该内容

15 篇文章

订阅专栏

本文介绍了HTML5中新加入的placeholder属性，该属性允许在文本框中显示提示信息，当用户开始输入时，提示信息会自动消失。此外，还提供了一个在不支持此属性的浏览器（如IE）中使用jQuery模拟实现的方法。

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

HTML5里新引入很多有趣的新特征 ,文本框(INPUT)里的placeholder属性。placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。你以前可能无数次看到这种效果，但那些大部分是用JavaScript里实现的，而现在，HTML5提供了原生支持，而且效果更好！

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>

鉴于 placeholder 是个 html5 的属性， IE 下的 placeholder 模拟实现

$(function(){
    // placeholder
    if ($.browser.msie) {
        $(':text,:password').each(function(){
            var label = $('<label>');
            label.css({
                'position' : 'absolute',
                'margin-left' : '5px',
                'margin-top' : '5px',
                'color' : 'gray',
                'z-index' : 1
            }).text($(this).attr('placeholder')).click(function(){
                label.hide().next(':input').focus();
            });
            $(this).before(label).focus(function(){
                label.hide();
            }).blur(function(){
                if ($(this).val() == '') {
                    label.show();
                }
            });
        });
    }
});