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

 更新时间:2018年09月03日 10:40:16   作者:秋収冬藏  
这篇文章主要给大家介绍了关于react在安卓中输入框被手机键盘遮挡问题的解决方法,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧

前言

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

本文主要介绍了关于react在安卓输入框被键盘遮挡的相关内容,分享出来动大家参考学习,下面话不多说了,来一起看看详细的介绍吧

问题概述

今天遇到了一个问题,在安卓手机上,当我要点击输入“店铺名称”时,手机软键盘弹出来刚好把输入框挡住了;挡住就算了,关键是页面还不能向上滑动,整个手机窗口被压为原来的二分之一左右;

然后

然后找了一些方案,不过不大适用,或者是有点麻烦;所以需要整合一下,

首先,我想一下我要实现的效果(2018/9/3补充:评论区有更加简单的实现方法)

想要实现的效果

如图,当手机键盘出现时,页面是可以自由滚动的,而且当前聚焦的输入框往红线处靠齐,这样就刚好在剩下的窗口的垂直正中间,这样就不会出现输入框被挡住,看不到自己输入的内容了 ;

第一步,使屏幕压小时,页面内容可以滚动查看

如下图所示,黑色框代表屏幕,蓝色框代表页面大小,当屏幕被压小时,页面内容必须保持原来的高度:

实现原理,页面一进来时,我就获取窗口的高度,给最外层的div设置一个最小高度,这样就算窗口压小了,页面还能维持原来的高度,可以滚动浏览:

  let initWindowHeight=window.innerHeight
  let wrapDiv=document.getElementsByClassName('animated-router-forward-enter-done')[0]
  wrapDiv.style.minHeight =initWindowHeight+'px'

第二步,滚到红线处

由于我们不能直接知道软键盘什么时候出来,不过软键盘出来的时候窗口高度会缩小,所以我们可以通过监听窗口大小变化事件来判断软键盘是否弹出,比如浏览器窗口高度突然缩小25%以上,那么我们就认为是软键盘出来了,然后我们获取聚焦input距离页面顶部的距离,计算距离红线有多少距离,假设距离是60,那么我们就让页面向上滚动60,这时input就刚刚好到了红线处;

 window.onresize=function(){ 
  if(initWindowHeight-window.innerHeight>initWindowHeight/4&&document.querySelectorAll(':focus').length>0){
   //offset是封装好的一个获取元素距离页面顶部滚动距离的方法
   if(offset(document.querySelectorAll(':focus')[0]).top>initWindowHeight/4){
    document.body.scrollTop=offset(document.querySelectorAll(':focus')[0]).top-initWindowHeight/4
   }
  }else if(window.innerHeight-initWindowHeight<20){
   document.body.scrollTop=0
  }
 };

完整代码

因为可能有多个页面要调用,所以我把代码放到一个单独的js文件中:

function pageInputScroll() {
 
 let initWindowHeight=window.innerHeight
 setTimeout(() => {
  let wrapDiv=document.getElementsByClassName('animated-router-forward-enter-done')[0]
  //console.log(wrapDiv.style)
  wrapDiv.style.minHeight =initWindowHeight+'px'
   
  }, 500);
  //由于我们不能直接知道软键盘什么时候出来,不过软键盘出来的时候窗口高度会缩小,所以我们可以通过监听窗口大小变化事件来判断软键盘是否弹出
 window.onresize=function(){ //如果浏览器窗口高度缩小25%以上,就认为是软键盘出来了
  if(initWindowHeight-window.innerHeight>initWindowHeight/4&&document.querySelectorAll(':focus').length>0){
   if(offset(document.querySelectorAll(':focus')[0]).top>initWindowHeight/4){
    document.body.scrollTop=offset(document.querySelectorAll(':focus')[0]).top-initWindowHeight/4
   }
  }else if(window.innerHeight-initWindowHeight<20){
   document.body.scrollTop=0
  }
  
 };
}
function offset(element) {
 var offest = {
  top: 0,
  left: 0
 };
 
 var _position;
 
 getOffset(element, true);
 
 return offest;
 
 // 递归获取 offset, 可以考虑使用 getBoundingClientRect
 function getOffset(node, init) {
  // 非Element 终止递归
  if (node.nodeType !== 1) {
   return;
  }
  _position = window.getComputedStyle(node)['position'];
 
  // position=static: 继续递归父节点
  if (typeof(init) === 'undefined' && _position === 'static') {
   getOffset(node.parentNode);
   return;
  }
  offest.top = node.offsetTop + offest.top - node.scrollTop;
  offest.left = node.offsetLeft + offest.left - node.scrollLeft;
 
  // position = fixed: 获取值后退出递归
  if (_position === 'fixed') {
   return;
  }
 
  getOffset(node.parentNode);
 }
}

export {pageInputScroll};

在react页面中引入js并调用:

 import {pageInputScroll} from '../../util/pageInputScroll'
 ......
 componentDidMount(){
  pageInputScroll()
 }

如果只是想在安卓下使用,可以加一个判断:

 if(/Android/i.test(navigator.userAgent)){
  pageInputScroll()
 }

效果动图

我在pc端的谷歌浏览器模拟一下实现的效果:

备注

offset()方法是使用js实现类似jquery的offset()的一个方法,参考自:原生js实现offset方法

总结:

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

相关文章

  • 深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    这篇文章主要介绍了深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践,TypeScript 增加了代码的可读性和可维护性,拥有活跃的社区,,需要的朋友可以参考下
    2019-06-06
  • 一起来了解React的Hook

    一起来了解React的Hook

    这篇文章主要为大家详细介绍了React的Hook,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 在 React 中如何从状态数组中删除一个元素

    在 React 中如何从状态数组中删除一个元素

    这篇文章主要介绍了在 React 中从状态数组中删除一个元素,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析

    react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析

    这篇文章主要介绍了react 实现图片正在加载中 加载完成 加载失败三个阶段的,通过使用loading的图片来占位,具体原理解析及实现代码跟随小编一起通过本文学习吧
    2021-05-05
  • React中使用Mobx的方法

    React中使用Mobx的方法

    Mobx是一个前端“状态管理框架”,状态管理就是将分布在各个组件、各个模块中的状态的变化,按照一定的规则,进行统一的管理,这篇文章主要介绍了React中如何使用Mobx,需要的朋友可以参考下
    2023-02-02
  • 使用React SSR写Demo一学就会

    使用React SSR写Demo一学就会

    这篇文章主要为大家介绍了使用React SSR写Demo实现教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • React 三大属性之state的使用详解

    React 三大属性之state的使用详解

    这篇文章主要介绍了React 三大属性之state的使用详解,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • 详解react使用react-bootstrap当轮子造车

    详解react使用react-bootstrap当轮子造车

    本篇文章主要介绍了详解react使用react-bootstrap当轮子造车,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • 基于Cloud Studio构建React完成点餐H5页面(腾讯云 Cloud Studio 实战训练营)

    基于Cloud Studio构建React完成点餐H5页面(腾讯云 Cloud Studio 实战训练营)

    最近也是有机会参与到了腾讯云举办的腾讯云Cloud Studio实战训练营,借此了解了腾讯云Cloud Studio产品,下面就来使用腾讯云Cloud Studio做一个实战案例来深入了解该产品的优越性吧,感兴趣的朋友跟随小编一起看看吧
    2023-08-08
  • React错误边界Error Boundaries详解

    React错误边界Error Boundaries详解

    错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树
    2022-12-12

最新评论