app解决文本输入时，软键盘遮盖掉页面的解决方案

一、问题背景

在做app的过程中，有一个页面存在一个富文本框，在页面中进行输入的时候，手机弹出的软键盘会遮盖掉原先页面中的部分内容。

 

二、解决方案

首先我们要知道的是：软键盘弹出的时候，页面做了什么动作？答案是resize。在软键盘弹出的时候页面被挤压，页面后进行resize。

知道了这一点，就好做了。我们可以监听resize事件，然后对界面进行一些操作。

 

三、不多说直接上一个范例

function getResize（）{

window.addEventListener('resize', function () {
      var height = document.getElementById('allmap').style.height;
      if(height == '9rem'){
        document.getElementById('allmap').style.height = '1rem';
      }else{
        document.getElementById('allmap').style.height = '9rem';
      }
    });

}

也欢迎登录我的个人网站，里面有更多的文章及技术咨询在等你：http://www.guangmuhua.com