Example code of jQuery encapsulating placeholder-JS Tutorial-php.cn

Example code of jQuery encapsulating placeholder

零下一度

Release： 2017-07-21 17:27:57

Original

1384 people have browsed it

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"/>

Copy after login

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

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

Copy after login

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();

Copy after login

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

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

Copy after login

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)

Copy after login

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)

Copy after login

Default configuration items:

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

Copy after login

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');
}

Copy after login

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();
    });
};

Copy after login

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);

Copy after login

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

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

Copy after login

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!