在react中安卓手机输入框被软键盘遮住的问题，有什么好的方法没，我没有用reactnative

Question

我们使用 H5 做移动 App，或者进行移动网站开发时。如果文本输入框在整个页面的下方，当我们点击输入框要输入文字时，系统弹出的虚拟键盘就会将输入框给挡住。（这个只有在Android 系统下会有这个问题，iOS 系统会自动将整个页面上移动。）

Answer 1

当弹出软键盘时到底发生了什么？ ios手机$('body').scrollTop()会改变，而android手机$(window).height()会改变弹出软键盘是渐变的过程。供以下方法参考：

// ios手机
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手机
var winHeight = $(window).height(); // 获取当前页面高度  
$(window).resize(function() {  
  var resizeHeight = $(this).height();  
  if (winHeight - resizeHeight > 50) {  
      // 软键盘弹出  
      $('body').css('height', winHeight + 'px');  
  } else {  
      //软键盘收起
      $('body').css('height', '100%');  
  }  
});  

希望对您有所帮助！