前言:css
從之前的項目中找一個問題的解決方案,順帶找到了這個安卓機型調起輸入法,頁面沒有自動上滑致使輸入框被彈起的鍵盤遮擋的解決方案。這個問題只有安卓機型頁面中的輸入框處於底部(也就是底部鍵盤區域)的時候纔會出現,近一年的項目中不多有表單輸入比較多的場景,因此一直都沒碰到這種問題。如今記錄下來,之後須要的時候好找些。vue
示例代碼:android
公共方法封裝:this
//調起輸入法,鍵盤自動上滑 function inputUp(ele){ //安卓機型,自動上滑露出輸入框 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端 if(isAndroid){ $(ele).on('click', function () { var target = this; setTimeout(function(){ target.scrollIntoViewIfNeeded(); },100); }); $(ele).on('focus', function () { //自動反彈 輸入法高度自適應 var winHeight = $(window).height(); //獲取當前頁面高度 $(window).resize(function() { var thisHeight = $(this).height(); if (winHeight - thisHeight > 50) { //當軟鍵盤彈出,在這裏面操做 $('body').css('height', winHeight + 'px'); } else { //當軟鍵盤收起,在此處操做 $('body').css('height', '100%'); } }); }); } }
方法使用:spa
vue項目爲例,須要在頁面渲染的時候進行調用,其中num爲輸入文本框的類名。通常頁面頂部的文本框不須要處理,底部須要處理的全部的文本框都要調用這個方法。code
1 mounted: function(){ 2 common.inputUp('.num'); 3 }