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


Posted in Javascript onSeptember 03, 2018

前言

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

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

问题概述

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

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

然后

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

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

想要实现的效果

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

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

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

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

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

实现原理,页面一进来时,我就获取窗口的高度,给最外层的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端的谷歌浏览器模拟一下实现的效果:

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

备注

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

总结:

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

Javascript 相关文章推荐
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
vue监听对象及对象属性问题
Aug 20 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 #Javascript
VUE预渲染及遇到的坑
Sep 03 #Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 #Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 #Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 #Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 #Javascript
webpack4 处理CSS的方法示例
Sep 03 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
JavaScript window.location对象
2014/11/14 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
vuejs如何配置less
2017/04/25 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
详解vue组件开发脚手架
2018/06/15 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
公积金单位接收函
2014/01/11 职场文书
上课睡觉检讨书
2014/01/28 职场文书
企业消防安全制度
2014/02/02 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
民主生活会意见
2015/06/05 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript