模拟HTML5文本框的placeholder属性

不支持placeholder属性的浏览器用jQuery库模拟。

包裹文本框的外层容器加上.placeholder类,有效率地获取对应元素。

if (!('placeholder' in document.createElement('input'))) {                   
    $('.placeholder').find('input[placeholder], textarea[placeholder]').each(function(k, v) {
        var $obj        = $(v),
            val         = $obj.val(),
            placeholder = $obj.attr('placeholder');
      
        if (val == '') {
            $obj.val(placeholder);                    
        }
      
        $obj.focus(function() {
            if ($obj.val() === placeholder) {
                $obj.val('');
            }
        }).blur(function() {
            val = $obj.val();
            if (val == '' || val == placeholder) {
                $obj.val(placeholder);
            }
        });
    });
}  

查看演示

现在还没有评论

留下您的大名