移动端手机软键盘遮挡输入框问题 今天药忘吃喽~ 2022-05-29 11:52 216阅读 0赞 页面: <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的值即可。
还没有评论,来说两句吧...