Example code of jQuery encapsulating placeholder

The default prompt text of the input box on the page generally uses the placeholder attribute, that is:

<input type="text" name="username" placeholder="请输入用户名" value="" id="username"/>

The color of the default text under style control can be added at most

input::-webkit-input-placeholder{color:#AAAAAA;}

But this placeholder attribute is not supported in lower version browsers, so it is really necessary to implement placeholder in lower version browsers If you have the same effect, you need to write a plug-in for compatibility. Let’s explain in detail how to use jquery to achieve this simulation effect.

To achieve this simulation effect, the general calling method of the page:

$('input').placeholder();

First, write the general structure of the jquery plug-in:

;(function($){
    $.fn.placeholder = function(){//实现placeholder的代码    }
})(jQuery)

Next we have to determine whether the browser supports the placeholder attribute.

;(function($){
    $.fn.placeholder = function(){this.each(function(){var _this = this;var supportPlaceholder = 'placeholder' in document.createElement('input');if(!supportPlaceholder){//不支持placeholder属性的操作}
        });
    }
})(jQuery)

We need to support chain operations, as follows:

;(function($){
    $.fn.placeholder = function(){         return this.each(function(){var _this = this;var supportPlaceholder = 'placeholder' in document.createElement('input');if(!supportPlaceholder){//不支持placeholder属性的操作}
        });
    }
})(jQuery)

Default configuration items:

options = $.extend({
    placeholderColor:'#aaaaaa',
    isSpan:false, //是否使用插入span标签模拟placeholder的方式，默认是不需要onInput:true //实时监听输入框},options);

If you do not need to use span to simulate the placeholder effect, then you need to judge by the value of the input box, as follows:

if(!options.isSpan){
    $(_this).focus(function () {var pattern = new RegExp("^" + defaultValue + "$|^$");
        pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
    }).blur(function () {if($(_this).val() == defaultValue) {
            $(_this).css('color', defaultColor);
        }else if($(_this).val().length == 0) {
            $(_this).val(defaultValue).css('color', options.placeholderColor)
        }
    }).trigger('blur');
}

If you need the same span tag to simulate the placeholder effect, the code is as follows:

var $simulationSpan = $('<span class="wrap-placeholder">'+defaultValue+'</span>');
$simulationSpan.css({'position':'absolute','display':'inline-block','overflow':'hidden','width':$(_this).outerWidth(),'height':$(_this).outerHeight(),'color':options.placeholderColor,'margin-left':$(_this).css('margin-left'),'margin-top':$(_this).css('margin-top'),'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px','padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0,'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px','font-size':$(_this).css('font-size'),'font-family':$(_this).css('font-family'),'font-weight':$(_this).css('font-weight')
});//通过before把当前$simulationSpan添加到$(_this)前面，并让$(_this)聚焦$(_this).before($simulationSpan.click(function () {
    $(_this).trigger('focus');
}));//当前输入框聚焦文本内容不为空时，模拟span隐藏$(_this).val().length != 0 && $simulationSpan.hide();if (options.onInput) {//绑定oninput/onpropertychange事件var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
    $(_this).bind(inputChangeEvent, function () {
        $simulationSpan[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
    });
}else {
    $(_this).focus(function () {
        $simulationSpan.hide();
    }).blur(function () {/^$/.test($(_this).val()) && $simulationSpan.show();
    });
};

Overall code:

;(function($){
    $.fn.placeholder = function(options){
        options = $.extend({
            placeholderColor:'#aaaaaa',
            isSpan:false, //是否使用插入span标签模拟placeholder的方式，默认是不需要onInput:true //实时监听输入框        },options);         return this.each(function(){var _this = this;var supportPlaceholder = 'placeholder' in document.createElement('input');if(!supportPlaceholder){//不支持placeholder属性的操作var defaultValue = $(_this).attr('placeholder');var defaultColor = $(_this).css('color');if(!options.isSpan){
                    $(_this).focus(function () {var pattern = new RegExp("^" + defaultValue + "$|^$");
                        pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);
                    }).blur(function () {if($(_this).val() == defaultValue) {
                            $(_this).css('color', defaultColor);
                        }else if($(_this).val().length == 0) {
                            $(_this).val(defaultValue).css('color', options.placeholderColor)
                        }
                    }).trigger('blur');
                }else{var $simulationSpan = $('<span class="wrap-placeholder">'+defaultValue+'</span>');
                    $simulationSpan.css({'position':'absolute','display':'inline-block','overflow':'hidden','width':$(_this).outerWidth(),'height':$(_this).outerHeight(),'color':options.placeholderColor,'margin-left':$(_this).css('margin-left'),'margin-top':$(_this).css('margin-top'),'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px','padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0,'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px','font-size':$(_this).css('font-size'),'font-family':$(_this).css('font-family'),'font-weight':$(_this).css('font-weight')
                    });//通过before把当前$simulationSpan添加到$(_this)前面，并让$(_this)聚焦$(_this).before($simulationSpan.click(function () {
                        $(_this).trigger('focus');
                    }));//当前输入框聚焦文本内容不为空时，模拟span隐藏$(_this).val().length != 0 && $simulationSpan.hide();if (options.onInput) {//绑定oninput/onpropertychange事件var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';
                        $(_this).bind(inputChangeEvent, function () {
                            $simulationSpan[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';
                        });
                    }else {
                        $(_this).focus(function () {
                            $simulationSpan.hide();
                        }).blur(function () {/^$/.test($(_this).val()) && $simulationSpan.show();
                        });
                    };
                }
            }
        });
    }
})(jQuery);

The calling method needs to pass span To simulate using tags:

$("#username").placeholder({
    isSpan:true});

The above is the detailed content of Example code of jQuery encapsulating placeholder. For more information, please follow other related articles on the PHP Chinese website!