因爲安卓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); }); }