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

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

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

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

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

猜你喜欢

转载自www.cnblogs.com/mrzhu/p/11482162.html
今日推荐