码迷,mamicode.com
首页 > 其他好文 > 详细

placeholder补丁

时间:2015-11-11 11:37:02      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:

/*
* 处理placeholder
* 处理对象:所以带有placeholder属性的input
* 处理逻辑:动态改变value值及颜色
*/
(function(jQuery) {

    jQuery.fn.placeholder = function() {
        var i = document.createElement(‘input‘),
            placeholdersupport = ‘placeholder‘ in i;
        if (!placeholdersupport) {
            var inputs = jQuery(this);
            inputs.each(function() {
                var input = jQuery(this),
                    text = input.attr(‘placeholder‘),
                    pdl = 0,
                    height = input.outerHeight(),
                    width = input.outerWidth(),
                    placeholder = jQuery(‘<span class="phTips">‘ + text + ‘</span>‘);
                try {
                    pdl = input.css(‘padding-left‘).match(/\d*/i)[0] * 1;
                } catch (e) {
                    pdl = 5;
                }
                placeholder.css({
                    ‘margin‘: 0,
                    ‘margin-left‘: -(width - pdl),
                    ‘height‘: height,
                    ‘line-height‘: height + "px",
                    ‘position‘: ‘absolute‘,
                    ‘color‘: "#cecfc9",
                    ‘bottom‘: ‘auto‘,
                    ‘left‘: ‘auto‘,
                    ‘top‘: ‘auto‘,
                    ‘bottom‘: ‘auto‘,
                    ‘font-size‘: "12px"
                });
                placeholder.click(function() {
                    input.focus();
                });
                if (input.val() !== "") {
                    placeholder.css({
                        display: ‘none‘
                    });
                } else {
                    placeholder.css({
                        display: ‘inline‘
                    });
                }
                placeholder.insertAfter(input);
                input.keyup(function(e) {
                    if (jQuery(this).val() !== "") {
                        placeholder.css({
                            display: ‘none‘
                        });
                    } else {
                        placeholder.css({
                            display: ‘inline‘
                        });
                    }
                });
            });
        }
        return this;
    };
    //初始化,也可以单独针对某一个设置
    jQuery(‘input[placeholder]‘).placeholder();

})($);

placeholder补丁

标签:

原文地址:http://www.cnblogs.com/jiet/p/4955325.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!