H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】IOS的输入框失焦滚动问题

IOS的输入框失焦滚动问题

littleWang发布于 今天 08:27

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)
}
}
}

Vue父元素包裹

<div  @focusout="handleInputBlur" @focusin="handleInputIn">
</div>
javascript前端vue.js
阅读 33更新于 今天 08:31
本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
avatar

littleWang
1 声望
0 粉丝

0 条评论
得票时间

avatar

littleWang
1 声望
0 粉丝

宣传栏

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)
}
}
}

Vue父元素包裹

<div  @focusout="handleInputBlur" @focusin="handleInputIn">
</div>

本文地址:H5W3 » 【JS】IOS的输入框失焦滚动问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址