IOS的输入框失焦滚动问题
IOS当输入框的位置在比较下面的时候，会发生滚动来让出键盘对应的位置，但是有的时候就会出现让出的位置在键盘下去时没有发生回滚，所以就会出现页面出现空白显示不全的问题。
解决方案：
在包含输入框的父元素进行事件监听，当出现失焦时判断是否是输入框，然后控制滚动。为了避免出现从一个滚动框到另一个滚动框出现滚动的问题，所以对滚动事件做了延迟和清除处理。失焦采用focusout事件监听，是因为blur事件不会冒泡。
handleInputBlur(e) {
if (
e &&
e.target &&
e.target.tagName &&
(e.target.tagName.toLowerCase() === 'input' ||
e.target.tagName.toLowerCase() === 'textarea') &&
e.target.getAttribute('readonly') !== 'readonly'
) {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
window.scrollTo(0, 0)
}, 50)
}
},
// 获得焦点事件
handleInputIn(e) {
if (
e &&
e.target &&
e.target.tagName &&
(e.target.tagName.toLowerCase() === 'input' ||
e.target.tagName.toLowerCase() === 'textarea') &&
e.target.getAttribute('readonly') !== 'readonly'
) {
if (this.timer) {
clearTimeout(this.timer)
}
}
}【IOS的输入框失焦滚动问题】Vue父元素包裹
推荐阅读
- 前端面试每日|前端面试每日 3+1 —— 第665天
- 一文解决找不到电脑文件的烦恼
- 鼠年的最后一天，盘点下表格组件在2020年的更新记录
- 正则表达式匹配代码块的注释
- webpack|webpack 5 下的 react-typescript
- Vue组件库文档站点的搭建思路
- 如何使用Gatsby创建自己的博客
- 配置 Spring Security 登录后重定向到不同的页面
- 吴恩达机器学习逻辑回归的代价函数06
- MATLAB|【手把手制作三阶魔方模拟器】用MATLAB让你的魔方动起来