问题产生原因:
安卓:软键盘弹出后会改变页面的高度将页面顶上来。使用fixed或者absolute,会使得元素跟随body的底部移动,而安卓端软键盘将导致body高度变小而导致变形。
IOS端:苹果的软键盘是覆盖的(分层),因此没有什么问题。
解决思路:
记录页面高度,在键盘收起后,恢复原来高度
方法:
1.添加blur事件。
<textarea @blur="blur" placeholder="在此处填写意见" :adjust-position="false"></textarea>
adjust-position: false 键盘弹起时,不自动上推页面。
2.记录初始高度:
data() { return { innerHeight:document.body.clientHeight, };
3.收起键盘后还原高度
blur(){ const newInnerHeight = document.body.clientHeight if (this.innerHeight != newInnerHeight) {// 安卓手机软键盘弹出后屏幕高度发生变化,收起后恢复屏幕原来高度 document.querySelector('body').setAttribute('style', 'height:' + this.innerHeight +'px') } },