国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

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

发布时间:2019/07/18标签:   输入框    点击量:

原标题:通过focusout事件解决IOS键盘收起时界面不归位的问
成绩病症明天在开辟一个挪动真个 H5 页面时,碰到了 IOS 上键盘收起时界面无奈归位的成绩。上面具体描写下成绩和病症:页面构造出成绩的页面是一个表单构造。即相似于一个 div 下有4个 input 表单的构造,用于用户填写邮寄信息。相似:<div><inputtype="text"placeholder="请填写省市县"/><inputtype="text"placeholder="请填写地点"/><inputtype="text"placeholder="请填写姓名"/><inputtype="text"placeholder="请填写接洽电话"/></div>截图以下:键盘弹起时页面主动上移当用户在手机上输出接洽电话时,IPhone键盘会弹出,此时iphone上为了让用户能够看到电话输出框,会将全部页面团体向上挪动(否则键盘会遮住电话输出框)。此时,现实上页面顶部是分开了咱们的视口一局部间隔的(咱们看到界面中消逝了一行输出框)。键盘收起时页面无奈复原归位但是当用户输出实现封闭键盘后,键盘固然收起了,但页面地位却不会复原。成绩剖析现实上这是因为 IOS 无奈在键盘收起时,页面滚出视口的局部没有掉上去招致的。这时用户是能够经过手指将页面拖返来的。然而究竟休会欠好。要处理这个成绩,咱们能够在用户光标分开输出框的时间,挪用 window.scrollTo(0, 0) 来把页面转动到跟视口顶部对齐,从而完成页面归位的后果。那末当初成绩就是要给表单中 4 个输出框全体加上 blur 变乱,而后在 handler 中挪用 window.scrollTo。不外,不管是经过 Vue 的 @blur 仍是经过 DOM 操纵的方法增加,都要增加4个变乱监听,不是很文雅。很天然,咱们想到用变乱代办。变乱代办即,咱们把变乱监听放到顶部元素上;而后界说一个 inputBlur 的函数等候触发。<div@blur="inputBlur"><inputtype="text"placeholder="请填写省市县"/><inputtype="text"placeholder="请填写地点"/><inputtype="text"placeholder="请填写姓名"/><inputtype="text"placeholder="请填写接洽电话"/></div>成果,发觉咱们的变乱监听器无奈触发。起因经查是输出框的 blur 变乱无奈冒泡。无奈冒泡的处理计划经由查问,发觉 focus 和 blur 两个 DOM 变乱在标准中就是无奈冒泡的。而与之相相似的有别的 2 个变乱 focusin 和 focusout 则是能够冒泡的。网上一些文章提到 focusin 和 focusout 是 IE 扫瞄器才支撑的一种 DOM 变乱。而现实上咱们看 MDN 文档发觉,这两个变乱曾经成为 DOM 3 标准的一个尺度,并且可支撑的扫瞄器数目并很多。

版权信息Copyright © IT技术教程 版权所有    ICP备案编号:鲁ICP备09013610号