IOS input 光标飘忽不定 / 软键盘收回的时候，内容被顶上去，底部空白？

Question

预先声明：这不是我项目的图，盗图的...

**1. 这图和我的第一个情况一样，输入的时候啥也看不全，输入完了之后，失焦就可以看到了。
删除（回退）的时候，也是一样，光标都消到头了，文字还在，但是，失焦就会发现全都清除了。**

1. 第二个问题是，IOS输入软键盘收回去的时候，页面内容下面就留白了，一个软键盘的高度。上下滑动几下，这个才恢复原状。

ps：搜索了很多很多的答案，几乎都是什么fixed的问题。我想说的是，我从一开始为了避免这种情况发生，主体页面用的是position: absolute;然后input用的是weui的flex。输入的操作也是直接在页面上进行，没用弹窗。

无语了，求解救~

Answer 1

第一个问题解决了，在网上找了很多办法，基本上都是说什么fixed定位的问题，然而我为了避免这个问题，一开始的定位就是absolute。

所以，基本上找了几天，网上的答案没啥用。
最后在这里找到一个人类似的答案，就是每次输入的时候就移动一点点，和失焦的时候也是。

于是乎，活马当作死马医，我就试成功了。代码如下：

this.inputStatus = false; // 这个状态将保证我来回移动

// 此代码加在input事件中，focus也行。
// 保证在输入的时候，不断的向上向下移动，在PC端上测试的时候，感官看到移动还是很明显的。
// 但是，在手机上测的时候，看着就没移动的样子，但是，问题却实实在在解决了。
if (this.inputStatus) {
      document.documentElement.scrollBy(0 , -1);
      document.body.scrollBy(0 , -1);
      this.inputStatus = false;
    }else {
      document.documentElement.scrollBy(0 , 1);
      document.body.scrollBy(0 , 1);
      this.inputStatus = true;
    }

希望能帮到大家。

Answer 2

</template>
<input type='text' @Blur='iOSKeyboardFixer'/>
</template>
<script>
export default {
...
methods: {
iOSKeyboardFixer (e) {
if (!IOS())
{
return
}
window.scrollTo(0, 0)
window.scrollTo(0, (e.target.getBoundingClientRect().top))
}
}
}
</script>