0
点赞
收藏
分享

微信扫一扫

手机网页,输入时 软键盘盖住输入框完整解决方案,兼容安卓、鸿蒙、苹果IOS


 手机网页,输入时 软键盘盖住输入框完整解决方案,兼容安卓、鸿蒙、苹果IOS

手机网页,输入时 软键盘盖住输入框完整解决方案,兼容安卓、鸿蒙、苹果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);
}
};//

举报

相关推荐

0 条评论