解决vue-cli单页面手机应用input点击手机端虚拟键

今日长沙网络推广为大家带来一篇解决vue-cli单页面手机应用中input点击触发手机端虚拟键盘弹出遮挡问题，这是一个极具参考价值的技巧，希望大家能够从中受益。接下来跟随长沙网络推广的脚步，共同这一技术难题。

在我们使用vue-cli搭建的手机H5页面中，假如某一页面的中部有input输入框，底部有通过position:absolute定位的元素，我们可能会遇到以下问题：

当用户在安卓手机上点击input框时，虚拟键盘弹出，可能会盖住输入框，同时底部定位的元素也可能被挤上来，影响用户体验。

对于这个问题，网络上有很多关于调整body宽高以及scroll的解决方案，但在路由页面中并不都适用。因为当虚拟键盘弹出时，页面的高度是变化的。我们需要监听这一变化，判断是否吊起键盘，然后据此设定底部模块的显示与隐藏，以及整个块元素的margin。

以下是相关代码示例：

在组件的mounted生命周期钩子中，我们首先获取初始的客户端高度并保存：

```javascript

mounted() {

this.clientHeight = document.documentElement.clientHeight;

const that = this;

// 针对安卓手机键盘弹出挡住输入框的问题

window.onresize = function() {

if (document.documentElement.clientHeight < that.clientHeight) {

// 当键盘弹出时，页面高度减小，此时需要调整元素位置

let scrollVal = document.documentElement.clientHeight - that.clientHeight;

$(".alert-main").css("marginTop", scrollVal); // 调整输入框的margin-top

$(".bottom-create").hide(); // 隐藏底部元素

} else {

$(".alert-main").css("marginTop", 0); // 恢复输入框的初始位置

$(".bottom-create").show(); // 显示底部元素

}

};

}

```

针对一个特定问题，即在华为手机上从其他路由切换到输入键盘后再返回当前路由时，document.documentElement.clientHeight的值会发生变化。为了解决这个问题，我们可以在页面第一次加载时将document.documentElement.clientHeight的值保存到store中，这样即使页面重新渲染，store中的值也不会改变。

长沙网络推广今天分享的这篇关于解决vue-cli单页面手机应用中input点击触发手机端虚拟键盘弹出遮挡问题的方法，希望能给大家带来帮助。同时也希望大家能够多多支持狼蚁SEO。在移动端的开发中，还有许多有趣且实用的技巧等待我们去和发现。