Jquery placeholder 搞定非HTML5

$.fn.placeholder = function() {
    return this.each(function() {
        var _self = $(this);
        var phv = _self.attr('placeholder');
        var color = '#777777';
        //div setup
        var placeholder = $('<div>' + phv + '</div>');
        $('body').append(placeholder);
        var top = _self.offset().top + ((_self.outerHeight() - _self.height()) / 2);
        var left = _self.offset().left + ((_self.outerWidth() - _self.width()) / 2);
        var width = _self.outerWidth();
        var height = _self.outerHeight();
        var zIndex = _self.css('zIndex');
        if (zIndex != 'auto') {
            zIndex = parseInt(zIndex) + 1;
        }
        placeholder.css({ textAlign: 'left', pointerEvents: 'none', cursor: 'text', display: 'none', zIndex: zIndex, color: color, position: 'absolute', left: left, top: top, width: width, height: height });

        var value = function() {
            var val = _self.val();
            if (val == typeof (undefined) || val == null || val == '')
                return '';
            else
                return val;
        };
        var addPlaceholder = function() {
            placeholder.css('display', '');
        };
        var remPlaceholder = function() {
            placeholder.css('display', 'none');
        };
        var hasPlaceholder = function() {
            return placeholder.css('display') != 'none';
        };

        if (value() == '') {
            addPlaceholder();
        }
        //needs to be keydown to get the value before changed
        //            _self.focusin(function(e) {
        //                if (hasPlaceholder() == true) {
        //                    remPlaceholder();
        //                }
        //            });
        //            _self.focusout(function(e) {
        //                if (value() == '') {
        //                    addPlaceholder();
        //                }
        //            });
        _self.keyup(function(e) {
            if (value() == '') {
                addPlaceholder();
            }
            else {
                remPlaceholder();
              }
        });

    });
};
function isPlaceholderSupport() {
    return 'placeholder' in document.createElement('input');
}
$(document).ready(function() {
if (isPlaceholderSupport()==false) {
        $('input[placeholder][type=text]').placeholder();
    }
});

posted on 2014-03-06 17:52  西湖浪子  阅读(230)  评论(0)    收藏  举报