安卓H5軟鍵盤遮擋輸入框

因爲安卓app內嵌入H5頁面,webview對於軟鍵盤沒有處理(若是不是產品強烈要求建議不要處理這種拆東牆補西牆的問題,由於其餘的手機上可能會出現已經優化軟鍵盤的狀況)css

1.input下方還有多餘空位可以提供滾動web

那麼只須要一句代碼就能夠處理app

setTimeout(function(){
                        if('scrollIntoView' in document.activeElement) {
                            document.activeElement.scrollIntoView();
                        } else {
                            document.activeElement.scrollIntoViewIfNeeded();
                        }
                },400);

2.input下方沒有多餘空間給頁面滾動到但是區域了(也就是說input在頁面最下面而且不是浮動的)優化

那麼咱們須要手動插入空白讓頁面有足夠的空間進行1中的滾動this

append進去的元素要比scrollIntoView先執行不然不生效(最好有定時器)spa

下面是完整代碼:code

var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1; 
        if (isAndroid) {
            //軟鍵盤處理,建議不要處理
            var isredundant = false;
            $('.r-email,.r-code').on('blur', function(){//r-email和r-code是在最底下要處理的input元素
                    setTimeout(function(){//作定時器是爲了要讓focus觸發後再判斷佔位元素狀態再執行
                        if (isredundant) {
                            isredundant = false;
                        }else{
                            $('.redundant_div').css('display','none');
                            isredundant = false;
                        }
                    }, 100)
            })
            $('input[type="text"],textarea').on('focus', function () {
                if ($(this).attr('class') == 'r-email' || $(this).attr('class') == 'r-code') {
                    if ($('.redundant_div').length > 0) {//若是以前是已經有插入的佔位元素的,那麼給出標識,讓blur的時候不隱藏佔位元素
                        if ($('.redundant_div').css('display') != 'none') {//若是佔位元素在就給狀態
                            isredundant = true;
                        }
                        setTimeout(function(){//這裏的定時器要比blur的長不然一直是隱藏的
                            $('.redundant_div').css('display','block')
                        },150)
                    }else{
                        $('.personal-data').append('<div class="redundant_div" style="width: 100%;height: 200px;"></div>')
                        setTimeout(function(){
                            $('.redundant_div').css('display','block')
                        },150)
                    }
                }
                setTimeout(function(){
                        // if (target.scrollIntoViewIfNeeded) {
                        //     target.scrollIntoViewIfNeeded();
                        // }
                        
                        if('scrollIntoView' in document.activeElement) {
                            document.activeElement.scrollIntoView();
                        } else {
                            document.activeElement.scrollIntoViewIfNeeded();
                        }
                },400);
            });
        }
相關文章
相關標籤/搜索