安卓系统中react输入框被手机键盘遮挡问题的解决方案

前言

React源于脸书的内部项目，因为公司对市场上所有的JavaScript MVC框架都不满意，所以决定写一套建立Instagram网站的方案。制作完成后，发现非常有用，于2013年5月开放。

本文主要介绍安卓输入框中react被键盘遮挡的相关内容，分享给大家参考学习。下面的话就不多说了，我们来看看详细的介绍

问题概述

今天遇到了一个问题。在安卓手机上，当我想点击输入“店名”时，手机软键盘弹出刚好挡住输入框；即使被屏蔽，关键是页面无法向上滑动，整个手机窗口被压到原来的一半左右；

然后

然后我找到了一些解决办法，但是不适合或者有点麻烦；所以我们需要整合，

首先想一想我想达到的效果(2018/9/3补充：评论区有更简单的实现方法)

想要的效果

如图，当手机键盘出现时，页面可以自由滚动，当前聚焦的输入框与红线对齐，使其正好在剩余窗口的垂直中间，这样输入框就不会被遮挡，看不到你输入的内容；

第一步，当屏幕被按下时，页面内容可以滚动

如下图所示，黑框代表屏幕，蓝框代表页面大小。按下屏幕时，页面内容必须保持其原始高度：

实现原理：页面一进来，我就得到窗口的高度，为最外面的div设置一个最小高度，这样即使窗口压力很小，页面也能保持原来的高度，可以滚动浏览：

让initwindowheight=window . inner height让wrap div=document . getelementsbyclassname(' animated-router-forward-enter-done ')[0]wrap div . style . Minh have=initwindowheight ' px '步骤2，滚动到红线

因为我们不能直接知道软键盘什么时候出来，但是出来的时候窗口高度会缩小，所以可以通过监控窗口大小变化事件来判断软键盘是否弹出。比如浏览器窗口高度突然缩小25%以上，那么我们就认为是软键盘出来了，那么我们就得到聚焦输入到页面顶部的距离，计算一下离红线有多远。假设距离是60，那么我们就让页面向上滚动60，然后输入刚好到达红线。

window . onresize=function(){ if(initWindowHeight-window . innerheightinwindowheight/4 document . queryselectorall(' : focus '). length 0){//Offset是一个封装的方法，用于获取元素距页面顶部的滚动距离if (offset (document。query selectorall(' : focus ')[0])。topinitwindowheight/4){ document . body . scroll top=offset(document . queryselectorall(' : focus ')[0])。top-initWindowHeight/4 } } else if(window . innerheight-initWindowHeight 20){ document . body . scroll top=0 } }；完全码

因为可能有多个页面需要调用，所以我将代码放在一个单独的js文件中：

函数page input croll(){让initWindowHeight=window。inner height setTimeout(()={ let wrap div=document。getelementsbyclassname('动画-路由器-转发-输入-完成')[0]//控制台。日志(wrappdiv。style)wrap div。风格。Minh h8=initWindowHeight ' px ' }，500)；//由于我们不能直接知道软键盘什么时候出来，不过软键盘出来的时候窗口高度会缩小，所以我们可以通过监听窗口大小变化事件来判断软键盘是否弹出window.onresize=function(){ //如果浏览器窗口高度缩小25%以上，就认为是软键盘出来了if(initWindowHeight-window。innerheight nitwindowheight/4文档。queryselectorall(' : focus ')。长度0){ if(offset(文档。query selectorall(' : focus ')[0]).topinitWindowHeight/4){文档。尸体。滚动顶部=偏移(文档。query selectorall(' : focus ')[0]).top-initWindowHeight/4 } } else if(window。inner height-initWindowHeight 20){ document。尸体。滚动顶部=0 } }；}函数偏移量（元素){ var offest={ top: 0，left : 0 }；var _ positiongetOffset(元素，真)；退货；//递归获取偏移，可以考虑使用方法函数getOffset(节点，init) { //非元素终止递归if (node.nodeType！==1){ return；} _位置=窗口。getcomputed style(节点)['位置']；//位置=static:继续递归父节点if(类型为(init)=' undefined ' _ position==' static '){ getOffset(节点。父节点)；返回；}关闭东部时间。top=节点。东部偏出。顶端节点。滚动顶部；东部时间。left=节点。离开东部。左节点。被偷窃；//位置=fixed:获取值后退出递归if(_ position===' fixed '){ return；} getOffset(节点。父节点)；} }导出{页面输入croll }；在反应页面中引入射流研究…并调用：

从导入{页面输入全部}././util/页面输入croll '.组件DidMount(){ PageInputRoll()}如果只是想在安卓下使用，可以加一个判断：

if(/Android/I . test(导航器。用户代理){ page input croll()}效果动图

我在个人计算机端的谷歌浏览器模拟一下实现的效果：

备注

偏移量()方法是使用射流研究…实现类似框架的偏移量()的一个方法，参考自：原生射流研究…实现抵消方法

总结：

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。