分类 实验室 下的文章

移动端表单过长时键盘弹起挡住输入框解决办法

问题：移动端表单过长时键盘弹起挡住输入框，只有输入值时浏览器才能把输入框顶起。

想要的效果：当用户点击输入时自动调整输入框到可视区域。

核心解决办法：计算当前元素是否在可视区域，判断是否需要顶起来，需要则给外层容器加一个padding顶起来。

+ function($){
        var Picker = function(params) {
            var p = this;
            p.params = params;

            p.containerHeight = 250;//键盘弹窗高度
            p.resize = false;//判断窗口是否被键盘顶起

            $(window).on('resize', function(){
                p.resize ? p.resize = false : p.resize = true;
                if(!p.resize){
                    _keyboard_close()
                }
            });

            if (p.params.input) {
                p.input = $(p.params.input);
                if (p.input.length > 0) {
                    p.input.on('click', _keyboard_open);
                    
                }
            }
            

            
            function _keyboard_open(e){
                e.preventDefault();
                
                var pageContent = p.input.parents('.content');
                if (pageContent.length === 0) return;

                var paddingTop       = parseInt(pageContent.css('padding-top'), 10),
                    paddingBottom    = parseInt(pageContent.css('padding-bottom'), 10),
                    pageHeight       = pageContent[0].offsetHeight - paddingTop - p.containerHeight,
                    pageScrollHeight = pageContent[0].scrollHeight - paddingTop - p.containerHeight,
                    inputTop         = p.input.offset().top - paddingTop + p.input[0].offsetHeight,
                    newPaddingBottom,
                    scrollTop;

                if (inputTop > pageHeight) {
                    scrollTop = pageContent.scrollTop() + inputTop - pageHeight;

                    if (scrollTop + pageHeight > pageScrollHeight) {
                        newPaddingBottom = scrollTop + pageHeight - pageScrollHeight + paddingBottom;
                        
                        if (pageHeight === pageScrollHeight) {
                            newPaddingBottom = p.container.height();
                        }
                        pageContent.css({'padding-bottom': (newPaddingBottom) + 'px'});
                    }
                    pageContent.scrollTop(scrollTop, 300);
                }
                
            }
            function _keyboard_close(){
               if (p.input && p.input.length > 0) p.input.parents('.content').css({'padding-bottom': ''}); 
            }

            
            
        
            return p;
            
        }


        $.fn.cloudPicker = function(params) {
            
            return this.each(function() {
                if(!this) return;

                var $this = $(this);
                var picker = $this.data("cloudPicker");
                if(!picker) {
                    var p = $.extend({
                        input: this,
                        value: $this.val() ? $this.val().split(' ') : ''
                    }, params);
                    picker = new Picker(p);
                    $this.data("cloudPicker", picker);
                }
            });
        };
    }(Zepto)
    


    $('input').cloudPicker();