Vue2 - 移动端H5网页点击输入框弹出软键盘后,收起后页面无法复原的问题,页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前(解决弹出键盘导致页面布局错乱,安卓+苹果ios)

250 篇文章 ¥9.90 ¥99.00

前言

如果您需要 Vue3 版本,请访问 这篇文章

在 vue2 H5移动端网页开发中,解决手机h5页面点击输入框弹起软键盘后,收回键盘时页面没恢复到原状,包括但不限于键盘收回后页面不回落、页面顶起不恢复、键盘遮盖输入框、布局错位错乱、页面整体上移或下移、收起后会导致页面被顶起无法复原、弹出与收起影响定位布局等问题,解决vue移动端h5网页各种因为 “软键盘弹出+收起” 带来的各种页面变化,提供详细示例代码。

解决各种软键盘问题,只要页面发生了"变化"没复原就可以解决。


如下图所示,强力解决键盘开启和收起后,布局发生了变化。

详细代码,保证搞定

在这里插入图片描述

解决方案

按照下方说明分析及示例代码,轻松搞定此问题。

### Vue 中实现点击输入框弹出软键盘Vue 项目中,通过 HTML 的 `input` 元素结合 Vue 的数据绑定、事件监听以及条件渲染等功能,能够轻松实现点击输入框自动弹出软键盘的效果。下面提供了一种简单的方式来进行此功能开发。 #### 使用 v-model 和 @focus/@blur 绑定逻辑处理 为了更好地管理状态变化,在组件内部定义布尔类型的变量用于追踪当前是否处于聚焦状态,并利用计算属性侦听器监测该值的变化以便执行相应动作: ```html <template> <div class="container"> <!-- input元素 --> <input type="text" ref="myInput" :value="inputValue" @focus="onFocus" @blur="onBlur"/> <!-- 自定义虚拟键盘 (可根据需求自定义样式和布局)--> <transition name="slide-fade"> <div v-if="isKeyboardVisible" class="virtual-keyboard">Virtual Keyboard</div> </transition> </div> </template> <script> export default { data() { return { inputValue: '', isKeyboardVisible: false, defaultHeight: null, nowHeight: null }; }, mounted(){ // 记录初始高度 this.defaultHeight = document.documentElement.clientHeight; // 添加resize事件监听以检测键盘弹出情况 window.addEventListener('resize', () => {this.nowHeight = document.documentElement.clientHeight}); }, methods:{ onFocus(event){ this.isKeyboardVisible=true; // 如果存在高度差异,则认为是由于键盘弹出引起的变动 if(this.defaultHeight !== this.nowHeight){ setTimeout(()=>{ event.target.scrollIntoView({behavior:'smooth'}); const scrollTop=document.body.scrollTop||document.documentElement.scrollTop; window.scrollTo(0,scrollTop+100); },200); } }, onBlur(){ this.isKeyboardVisible=false; // 当失去焦点后重置页面位置 window.scrollTo(0,this.defaultHeight-this.nowHeight); } } } </script> <style scoped> /* 这里可以添加动画效果 */ .slide-fade-enter-active { transition: all .3s ease-out; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter-from,.slide-fade-leave-to{ transform: translateY(-20px); opacity: 0; } .virtual-keyboard{ position:absolute; bottom:0; width:100%; background-color:#f9f9f9; border-top:solid 1px #ccc; padding:20px; box-shadow:0 -2px 4px rgba(0,0,0,.1); } </style> ``` 上述代码片段展示了如何创建一个响应式的表单控件,当用户点击输入框(`@focus`)会触发特定的行为——即展示模拟的软件盘界面;而一旦离开输入(`@blur`)则隐藏它[^1]。 同也考虑到了移动端浏览器特性,加入了对于视窗大小改变后的适配措施,确保即使有物理/虚拟键盘出现也会影响用户体验[^2][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值