html5手机底部输入框,html5 虚拟键盘弹出挡住底部的输入框解决方案

问题描述：

我们使用 h5 做移动网站开发时，如果文本框在页面的下方，当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题，IOS会自动将整个页面上移)，IOS中软键盘关闭后，页面上移的部分不会自动下移，体验不是很好。

解决方案：

可以借助元素的 scrollIntoView()方法。scrollIntoView()可以在所有的HTML元素上调用。调用该方法后，则被调用的元素会出现在视图窗口中，并且元素会和视图窗口的顶部齐平。

代码实例：

问题： 页面中有一个textarea 在页面的底部，软键盘弹出时会遮挡住textare.

解决思路：

1. 在textarea focus时调用scrollIntoView()方法

2. 软键盘关闭后，即获取到textarea blur 时将页面滚动到顶部(解决ios 页面不自动下移的问题)

3. 代码如下：

function focusBlur(state){

if(state == 'focus'){

// document.querySelector('textarea').scrollIntoView();

}else{

window.scroll(0,0); //页面返回到顶部

}

}

Android 虚拟键盘弹出把底部栏顶上去的解决办法

在AndroidManifest中使用ActivityGroup的activity中加上:android:windowSoftInputMode="adjustPan"

解决react-native软键盘弹出挡住输入框的问题

解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...

H5禁止手机虚拟键盘弹出

点击输入框弹出自定义弹窗,输入框是input标:但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加readonly属性,另一个就 ...

使用mui框架开发App,当input获取焦点时，键盘弹出，底部导航栏上升。

转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

H5页面关于android软键盘弹出顶起底部元素的解决方案

应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下: .tool{ width: 100%; height: 60px; position: fixed; left: 0px; b ...

Android中软键盘弹出时底部菜单上移问题

当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...

Android虚拟键盘弹出时挡住EditText解决方法

在manifest的activity节点使用 Xml代码  

【转】swift实现ios类似微信输入框跟随键盘弹出的效果

swift实现ios类似微信输入框跟随键盘弹出的效果 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会 ...

swift实现ios类似微信输入框跟随键盘弹出的效果

封面(图文无关) 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会跟随键盘一起向下收回,二者完全无缝连 ...

随机推荐

spritecow改造

快速入口 不读文章可以直接拐向这里: spritecow二代:https://kmdjs.github.io/arejs-tool-sprite/ 写在前面 工欲善其事必先利其器,最近fork了一份s ...

Python实战：扫描key完整性

之前在国际版本中,需要支持中英文切换功能,在如此繁多的源文件里要查找源文件里的key是语言资源包是否对应. 正好运用在之前学的python,写了个工具,支持自定义替换标签,批量处理源文件.现在看来,效 ...

VS2010安装帮助文档出现错误

安装VS2010后的帮助文档安装出现错误:未能在指定文件夹中创建本地存储区 安装完VS2010后,出现错误,取消后 再安装MSDN 打开“Help Library 管理器 - Microsoft He ...

c#获取枚举

在实际开发项目中,我们定义了一个枚举,往往我们需要在下拉框或其它地方展示枚举.为了加深印象,也为了帮到有需要的人,我写了一个DEMO. 第一步,我们定义一个枚举: ///

.project sturcture和Project Structure 无论是按快捷键或者是从files中打开都不显示

project sturcture和Project Structure 无论是按快捷键或者是从files中打开都不显示 event log中报:IllegalArgumentException:Mul ...

基于ZooKeeper的分布式Session实现(转)

1．   认识ZooKeeper ZooKeeper—— “动物园管理员”.动物园里当然有好多的动物,游客可以根据动物园提供的向导图到不同的场馆观赏各种类型的动物,而不是像走在原始丛林里,心惊胆颤的被 ...

hdu 3221 Brute-force Algorithm(高速幂取模，矩阵高速幂求fib)

http://acm.hdu.edu.cn/showproblem.php?pid=3221 一晚上搞出来这么一道题..Mark. 给出这么一个程序.问funny函数调用了多少次. 我们定义数组为所求 ...

【Unity与23种设计模式】访问者模式(Visitor)

GoF中定义: "定义一个能够在一个对象结构中对于所有元素执行的操作.访问者让你可以定义一个新的操作,而不必更改到被操作元素的类接口." 暂时没有完全搞明白 直接上代码 //访问者 ...

20164317 《网络对抗技术》Exp6 信息搜集与漏洞扫描

Exp6 信息搜集与漏洞扫描 一.原理与实践说明 (1)实践原理 信息搜集:渗透测试中首先要做的重要事项之一,搜集关于目标机器的一切信息 间接收集 DNS记录扫描和枚举 CorpWatch:auxil ...