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

当点击输入框时调起软盘，安卓和IOS会有所不同，IOS中弹起软盘会让整体布局往上移，而安卓不会而是整体布局高度缩减了。

参考了2篇文章

文章1：

移动端键盘挡住输入框_chueluo0880的博客-CSDN博客

文章2：

移动端软盘遮盖输入框的解决方案_Zdde_的博客-CSDN博客_移动端软键盘遮挡输入框

他们的思路大致是一致的，我这里采用了文章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);}};//

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

Android 软键盘盖住输入框的问题
Android 软键盘盖住输入框的问题当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一 ...
安卓手机主题软件_资源|一款安卓实现苹果ios风格主题软件
手持安卓机的我,有时候也想体验体验苹果iOS桌面. 虽然可以通过下载苹果的壁纸/图标来美化,不过桌面布局还是得用第三方启动器来实现. 啼咪给大家带来一款安卓实现苹果iOS风格主题软件:X桌面 X桌面介 ...
android虚拟键盘挡住布局,Android全屏时软键盘遮住输入框修改布局解决方案
一般 *android:windowSoftInputMode="adjustResize" *就能解决软键盘遮住输入框的问题,但是当Activity设为Full Screen这个 ...
微信公众号 - 实现 H5 网页在微信内置浏览器中下载文件，可预览和下载 office 文件（doc / xls / ppt / pdf 等）适用于任何前端技术栈网站，兼容安卓和苹果系统！
前言网上的教程都是让你写页面 "引导" 右上角三个点里,让用户自己去浏览器打开,其实这样用户体验并不好. 本文实现了最新微信公众号 H5 网页(微信内置浏览器中),预览下载 o ...
php手机网页弹出软键盘代码,Html5页面上如何禁止手机虚拟键盘弹出
工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加rea ...
html5关于editbox输入时软键盘把界面顶上去的问题
1. box.setDelegate(this);//注册代理对象类来进行管理 2. window.innerHeight; windowInnerHeight = window.innerHeigh ...
input输入时软键盘回车显示搜索
很多时候我们会看到输入法里面回车是搜索等字眼,今天我们就来实现这个效果原本的效果: <form action＝""><input type＝"sear ...
微信开发时遇到底部遮挡输入框的解决方案
在开发微信公众号功能时,页面底部一般会声明一些公司的版权之类的.但是如果用户需要在页面输入内容时,底部会漂浮在输入法的上面,甚至有的时候不是紧贴着输入法,而是有一小段间距.既影响用户输入又影响页面美观 ...
js网页判断移动终端浏览器版本信息是安卓还是苹果ios,判断在微信浏览器跳转不同页面,生成二维码...
一个二维码,扫描进入网页,自动识别下载苹果和安卓客户端,判断网页如下,(只有苹果的微信不能自动跳转)所以加个微信判断. <!DOCTYPE html> <html><he ...

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

解决思路与实现

步骤1：打开页面后，先获取当前窗体高度

步骤2：声明一个全局dom变量，来存储当前获取光标的输入框id

步骤3：输入框dom绑定获取光标事件，并传当前输入框的ID值

步骤4：监听窗口尺寸改变

步骤5：监听到窗口尺寸改变后，延时500毫秒后让窗体滚动到光标所在位置

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

最新文章

热门文章

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

解决思路与实现

步骤1：打开页面后，先获取当前窗体高度

步骤2：声明一个全局dom变量，来存储当前获取光标的输入框id

步骤3：输入框dom绑定获取光标事件，并传当前输入框的ID值

步骤4：监听窗口尺寸改变

步骤5：监听到窗口尺寸改变后，延时500毫秒后让窗体滚动到光标所在位置

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

最新文章

热门文章

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

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