码迷,mamicode.com
首页 > 移动开发 > 详细

移动端点击文本框 键盘弹出解决访问

时间:2019-09-07 18:23:49      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:原来   需要   size   界面   页面   点击   避免   最好   遇到   

当我们做h5的时候,经常会遇到键盘弹出遮挡文本框的情况,这里区分IOS和安卓,

在IOS中,IOS会在键盘弹出后自动将文本框上移,避免文本框被键盘挡住,但是在收起键盘的时候 在vue中会导致页面的卡死,这个时候我们可以用

document.body.scrollIntoView(false) 来手动让页面重新渲染,因为IOS收起键盘后,会触发当事文本框的blur事件,所以我们可以给文本框添加该事件。

 

在安卓中,通常会出现键盘把文本框遮挡住的情况,我们可以监听文本框的focus事件,当文本框focus事件触发时:将文本框移动至界面上方一半的位置,同时因为在安卓中收起键盘 blur不会被触发,但是会触发resize事件,所以我们需要在resize事件中判断是否是收起键盘的操作,如果是 则将当事文本框移动到原来的位置,在这里 如果仅仅是移动文本框的位置,可能会导致界面难看,最好的方案是将整个界面上移,所以我们不妨移动整个body上移,然后在收起键盘的时候 将Body复原。

移动端点击文本框 键盘弹出解决访问

标签:原来   需要   size   界面   页面   点击   避免   最好   遇到   

原文地址:https://www.cnblogs.com/mrzhu/p/11482162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!