内容简介:今天遇到了一个问题,在安卓手机上,当我要点击输入“店铺名称”时,手机软键盘弹出来刚好把输入框挡住了;挡住就算了,关键是页面还不能向上滑动,整个手机窗口被压为原来的二分之一左右;然后找了一些方案,不过不大适用,或者是有点麻烦;所以需要整合一下, 首先,我想一下我要实现的效果如图,当手机键盘出现时,页面是可以自由滚动的,而且当前聚焦的输入框往红线处靠齐,这样就刚好在剩下的窗口的垂直正中间,这样就不会出现输入框被挡住,看不到自己输入的内容了 ;
今天遇到了一个问题,在安卓手机上,当我要点击输入“店铺名称”时,手机软键盘弹出来刚好把输入框挡住了;挡住就算了,关键是页面还不能向上滑动,整个手机窗口被压为原来的二分之一左右;
然后
然后找了一些方案,不过不大适用,或者是有点麻烦;所以需要整合一下, 首先,我想一下我要实现的效果
想要实现的效果
如图,当手机键盘出现时,页面是可以自由滚动的,而且当前聚焦的输入框往红线处靠齐,这样就刚好在剩下的窗口的垂直正中间,这样就不会出现输入框被挡住,看不到自己输入的内容了 ;
第一步,使屏幕压小时,页面内容可以滚动查看
如下图所示,黑色框代表屏幕,蓝色框代表页面大小,当屏幕被压小时,页面内容必须保持原来的高度:
实现原理,页面一进来时,我就获取窗口的高度,给最外层的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){ 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() } 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- iOS:轻量可定制的防键盘遮挡textField实现总结
- 游戏中遮挡剔除方案总结
- 有效遮挡检测的鲁棒人脸识别
- CVPR 2020丨MaskFlownet:基于可学习遮挡掩模的非对称特征匹配
- Android获取软键盘的高度、键盘的打开与关闭、监听键盘处于打开还是关闭状态
- ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C语言接口与实现
(美)David R. Hanson / 人民邮电出版社 / 2010-8 / 79.00元
可重用的软件模块是构建大规模可靠应用程序的基石,创建可重用的软件模块是每个程序员和项目经理必须掌握的技能。C语言对创建可重用的API提供的语言和功能支持非常少,虽然C程序员写应用时都会用到API和库,但却很少有人去创建和发布新的能广泛应用的API。本书介绍用一种基于接口的设计方法创建可重用的API,这一方法将接口与实现分离开来,且与语言无关。书中详细描述了24个接口及其实现,便于读者深入了解此方法......一起来看看 《C语言接口与实现》 这本书的介绍吧!