placeholder IE兼容问题

来源:互联网 发布:热传导分析软件 编辑:程序博客网 时间:2024/06/05 13:23

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();                }            });        });    }});
0 0
原创粉丝点击