移动端H5 input输入完成后页面底部留白问题
栏目: JavaScript · 发布时间: 5年前
内容简介:最近在用
说明
最近在用 vue
写几个H5页面在微信上展示,遇到一个在弹窗上 input
输入完成之后点击键盘的完成,页面底部留出一片空白的问题
出现原因分析
- 当键盘抬起时,
window.scrollY
会从0变到键盘的高度,所以解决办法就是当input
失去焦点的时候,将window.scrollY
重新设置为0
解决
- 给所有的
input
`textarea组件设置获取焦点和设置焦点事件,失去焦点的时候将
`window.scrollY`设置为0 - 因为的是
vue
所以结合vue
来写代码
<template> <input class="m-input" :value="value" @input="$emit('input', $event.target.value)" @focus="inputFocus()" @focusout="inputFocusOut"> </template> <script> export default { name: "MInput", props:['value'], data(){ return{ timer:null } }, methods:{ inputFocus(){ if(this.timer){ clearTimeout(this.timer) } }, inputFocusOut(){ this.timer = setTimeout(() => { window.scrollTo(0,0) },10) } }, destroyed(){ if(this.timer){ clearTimeout(this.timer) } } } </script>
- 获取焦点事件,判断定时器是否存在如果存在的话清除掉(上一个input设置的定时器)
- 失去焦点事件,将
window.scrollY
设置为0
,并且给一个10
的定时器,减少页面失去焦点的突兀感(为了顺滑一点点) -
destroyed
vue
组件中如果使用了定时器,一定要记得在组件销毁的生命周期里将清时期清除掉,防止全局定时器过多,容易爆栈
补充:解决方案2
- 在input上分别增加
focus
和blur
的方法,基本可以解决键盘回落后留白问题;
handleFocus(event) { let e = event.currentTarget; setTimeout(() => { e.scrollIntoView({ block: 'start', behavior: 'smooth' }); }, 300); } handleblur() { let e = event.currentTarget; setTimeout(() => { e.scrollIntoView({ block: 'end', behavior: 'smooth' }); }, 300); window.scrollTo(0, 0); }
补充:解决方案3
//解决键盘弹出后挡表单的问题 window.addEventListener('resize', function() { if( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) { window.setTimeout(function() { if('scrollIntoView' in document.activeElement) { document.activeElement.scrollIntoView(); } else { document.activeElement.scrollIntoViewIfNeeded(); } }, 0); } });
补充:页面来回弹跳
- 问题:失焦时的scrollTop=0造成的页面弹跳。本来iOS是做了这方面的优化,在软键盘弹出和收起时页面会smooth的平滑,由于我加了scrollIntoView破坏了原生的优化导致弹跳了
- 解决:
handleFocus(event) { clearTimeout(this.timer); } handleblur() { this.timer = setTimeout(() => { document.body.scrollTop = 0; window.pageXOffset = 0; document.documentElement.scrollTop = 0; }, 100); }
最后
- 本文首发于: 移动端H5 input输入完成后页面底部留白问题
- 补充参考: 一文彻底解决iOS中键盘回落后留白问题
- 更新于2019/06/13
以上所述就是小编给大家介绍的《移动端H5 input输入完成后页面底部留白问题》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 紧贴底部的页脚
- Android实现底部状态栏切换
- 定制化你的ReactNative底部导航栏
- 项目实践-MD设计-底部菜单栏(一)
- 深耕业务——商品列表底部分销商品资源广告位
- iphone – 顶部和底部透明渐变的UITableView
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。