鍍金池/ 問答/HTML/ 在react中安卓手機(jī)輸入框被軟鍵盤遮住的問題,有什么好的方法沒,我沒有用rea

在react中安卓手機(jī)輸入框被軟鍵盤遮住的問題,有什么好的方法沒,我沒有用reactnative

我們使用 H5 做移動 App,或者進(jìn)行移動網(wǎng)站開發(fā)時。如果文本輸入框在整個頁面的下方,當(dāng)我們點擊輸入框要輸入文字時,系統(tǒng)彈出的虛擬鍵盤就會將輸入框給擋住。(這個只有在Android 系統(tǒng)下會有這個問題,iOS 系統(tǒng)會自動將整個頁面上移動。)

clipboard.png

回答
編輯回答
慢半拍

當(dāng)彈出軟鍵盤時到底發(fā)生了什么? ios手機(jī)$('body').scrollTop()會改變,而android手機(jī)$(window).height()會改變彈出軟鍵盤是漸變的過程。供以下方法參考:

// ios手機(jī)
var timer = null;
$('input').on('focus', function() {
    clearInterval(timer);
    var index = 0;
    timer = setInterval(function() {
        if(index>5) {
            $('body').scrollTop(1000000);
            clearInterval(timer);
        }
        index++;
    }, 50)
})

// android手機(jī)
var winHeight = $(window).height(); // 獲取當(dāng)前頁面高度  
$(window).resize(function() {  
  var resizeHeight = $(this).height();  
  if (winHeight - resizeHeight > 50) {  
      // 軟鍵盤彈出  
      $('body').css('height', winHeight + 'px');  
  } else {  
      //軟鍵盤收起
      $('body').css('height', '100%');  
  }  
});  

希望對您有所幫助!

2017年10月23日 01:21