移动端手机软键盘遮挡输入框问题

页面:

<section class="links"><h3 class="title">联系方式</h3><div class="content"><input autocomplete="autocomplete" type="text" name="link" placeholder="QQ、邮箱或手机等联系方式" v-model="userlink" @click.stop="linksInputEvent"/></div></section>

js:

linksInputEvent: function () {//联系方式输入和聚焦事件,解决手机虚拟键盘遮挡输入框问题var self = this;var timer = setTimeout(function () {var pannel = document.querySelector('.links .content input');pannel.scrollIntoView(true);pannel.scrollIntoViewIfNeeded();clearTimeout(timer);timer = null;}, 200);}

主要是三行代码：

var pannel = document.querySelector('.links .content input');pannel.scrollIntoView(true);pannel.scrollIntoViewIfNeeded();

获取输入框的dom对象以及添加这两个滚动事件

加入延时是因为软键盘出现需要时间。

另一种是通过输入框的focus和blur事件完成，当触发focus事件时，

input{position: fixed;top: 50px;}

当触发blur事件时，改变或删除position和top的值即可。