手机网页,输入时 软键盘盖住输入框完整解决方案,兼容安卓、鸿蒙、苹果IOS
当点击输入框时调起软盘,安卓和IOS会有所不同,IOS中弹起软盘会让整体布局往上移,而安卓不会而是整体布局高度缩减了。
他们的思路大致是一致的,我这里采用了文章1的思路;大致思路如下:
解决思路与实现
步骤1:打开页面后,先获取当前窗体高度
var winHeight = window.innerHeight; // 获取当前页面高度
步骤2:声明一个全局dom变量,来存储当前获取光标的输入框id
我这里给了一个默认值
var indexDomId='name';//当前DomID
步骤3:输入框dom绑定获取光标事件,并传当前输入框的ID值
html代码
<el-form-item label="姓名" prop="Name">
<el-input v-model="UserApplyForm.Name" id="Name" @focus="Domonfocus('Name')"></el-input>
</el-form-item>
JS代码:用来缓存输入框ID
function Domonfocus(name)
{
console.log(name)
indexDomId=name;
},
步骤4:监听窗口尺寸改变
window.onresize = function(){
//监听到窗口大小改变后执行相关业务
};//
步骤5:监听到窗口尺寸改变后,延时500毫秒后让窗体滚动到光标所在位置
这里说下为什么500毫秒后再执行
因为需要等待【步骤3】的业务执行完成
window.onresize = function(){
//获取窗体改变后的高度
var onresizeH=window.innerHeight;
//页面打开时的高度“减去”窗体改变后的高度
var _h=winHeight - resizeHeight;
if (_h>50)
{
// 软键盘弹出-----等待500毫秒后,滚动至光标所在位置
setTimeout(function(){document.getElementById(indexDomId).scrollIntoView(true);},500);
}
else {
//软键盘收起-----等待500毫秒后,滚动至光标所在位置
setTimeout(function(){document.getElementById(indexDomId).scrollIntoView(true);},500);
}
};//