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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
innerText 使用示例
Jan 23 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
个人小程序接入支付解决方案
May 23 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
解决vue自定义全局消息框组件问题
Nov 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
基于mysql的论坛(5)
2006/10/09 PHP
How do I change MySQL timezone?
2008/03/26 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
python抓取百度首页的方法
2015/05/19 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
Java语言的优势
2015/01/10 面试题
捐款倡议书
2014/04/14 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
详解python字符串驻留技术
2021/05/21 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python