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

Posted 2020-11-12 mrzhu

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

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

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

 

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