通过focusout事件解决IOS键盘收起时界面不归位的问

来源:http://www.chinese-glasses.com 作者:Web前端 人气:134 发布时间:2020-04-29
摘要:时间: 2019-09-15阅读: 970标签: 输入框 时间: 2019-07-16阅读: 259标签: 键盘问题症状 直接修改value值是无法触发对应元素的事件的。通过发送输入框input事件了,可以触发。 今天在开发一个移动

时间: 2019-09-15阅读: 970标签: 输入框

时间: 2019-07-16阅读: 259标签: 键盘问题症状

直接修改value值是无法触发对应元素的事件的。通过发送输入框input事件了, 可以触发。

今天在开发一个移动端的 H5 页面时,遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状:

这里简单封装了一个方法.

页面结构

window.inputValue = function (dom, st) { var evt = new InputEvent('input', { inputType: 'insertText', data: st, dataTransfer: null, isComposing: false }); dom.value = st; dom.dispatchEvent(evt);}

出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的结构,用于用户填写邮寄信息。类似:

简单的调用:

div input type="text" placeholder="请填写省市县" / input type="text" placeholder="请填写地址" / input type="text" placeholder="请填写姓名" / input type="text" placeholder="请填写联系电话" //div
window.inputValue(document.querySelector('input'),'输入要赋值的内容')

截图如下:

键盘弹起时页面自动上移

当用户在手机上输入联系电话时,IPhone键盘会弹出,此时iphone上为了让用户可以看到电话输入框,会将整个页面整体向上移动(不然键盘会遮住电话输入框)。此时,实际上页面顶部是离开了我们的视口一部分距离的(我们看到界面中消失了一行输入框)。

键盘收起时页面无法还原归位

然而当用户输入完成关闭键盘后,键盘虽然收起了,但页面位置却不会还原。

问题分析

实际上这是由于 IOS 无法在键盘收起时,页面滚出视口的部分没有掉下来导致的。这时用户是可以通过手指将页面拖回来的。但是毕竟体验不好。

要解决这个问题,我们可以在用户光标离开输入框的时候,调用window.scrollTo(0, 0)来把页面滚动到跟视口顶部对齐,从而实现页面归位的效果。

那么现在问题就是要给表单中 4 个输入框全部加上 blur 事件,然后在 handler 中调用window.scrollTo。不过,无论是通过 Vue 的@blur还是通过 DOM 操作的方式添加,都要添加4个事件监听,不是很优雅。很自然,我们想到用事件代理。

事件代理

即,我们把事件监听放到顶部元素上;然后定义一个 inputBlur 的函数等待触发。

本文由10bet发布于Web前端,转载请注明出处:通过focusout事件解决IOS键盘收起时界面不归位的问

关键词:

最火资讯