问题描述:

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

解决方案:

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

代码实例:

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

  解决思路:

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

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

      3. 代码如下:

     <div style="height:800px"></div>
<textarea onfocus="focusBlur('focus')" onblur="focusBlur('blur')"></textarea>
<div style="height:300px"></div>
<script>
function focusBlur(state){
if(state == 'focus'){
// document.querySelector('textarea').scrollIntoView();
}else{
window.scroll(0,0); //页面返回到顶部
}
}
</script>

  

html5 虚拟键盘弹出挡住底部的输入框解决方案的更多相关文章

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

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

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

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

  3. H5禁止手机虚拟键盘弹出

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

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

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

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

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

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

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

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

    在manifest的activity节点使用 Xml代码   <activity android:windowSoftInputMode="adjustResize"/> ...

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

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

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

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

随机推荐

  1. git 控制操作

    克隆文件 git clone https://gitee.com/xxxxx/xxxxx.git 克隆分支文件 git clone -b 分支名 https://gitee.com/xxxxx/xxx ...

  2. MySQL 中去重 distinct 用法

    在使用MySQL时,有时需要查询出某个字段不重复的记录,这时可以使用mysql提供的distinct这个关键字来过滤重复的记录,但是实际中我们往往用distinct来返回不重复字段的条数(count( ...

  3. stark组件之添加、修改页面内容搭建(七)

    如何快速的进行数据的添加以及修改呢?modelform来实现是可以达到效果的,在这里就是应用了modelform,每一个表都不同,所以需要创建不同的modelform. def get_model_f ...

  4. Python中的列表(3)

    我们创建的列表元素的顺序是无法预测的,因为我们无法控制用户提供数据的顺序. 为了组织列表中的元素,所以Python帮我们提供一些方法用来排序列表中的元素. 1.方法 sort() 可以对列表永久性排序 ...

  5. 字符串String对象构造方法的创建和直接赋值的区别

    /* * 通过构造方法创建的字符串对象和直接赋值方式创建的字符串对象有什么区别呢? * 区别是:通过构造方法创建的字符串对象是在堆内存.通过赋值创建的字符串对象是在方法区的常量池 * * == * 基 ...

  6. CF-697B Barnicle与691C Exponential notation

    无聊写两个题解吧,上午做比赛拉的,感触很多! B. Barnicle time limit per test 1 second memory limit per test 256 megabytes ...

  7. readdir() 获取文件类型

    readdir()获取文件类型 //// 字符设备文件 type =2, filename207=tty0 crw-rw----  1 root root     4,  0 04-10 16:28 ...

  8. Elasticsearch5.6搭建及拼音中文混合搜索实现

    https://blog.csdn.net/UUfFO/article/details/78154499

  9. Avro kafka(Producer-Consumer)

    https://blog.csdn.net/mlljava1111/article/details/51376990

  10. 计蒜客15430 XOR Queries(Trie处理位运算问题)

    题意: 给出一个长度为n的数组C,回答m个形式为(L, R, A, B)的询问, 含义为存在多少个不同的数组下标k属于[L, R]满足C[k] XOR A >= B(式中XOR为异或运算). T ...