问题描述:

  我们使用 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. java线程学习1

    java实现多线程有三种方式:继承Thread类,重写run方法,启动使用start:实现runnable接口,重写run方法:实现callable接口,重写call方法(可以有返回值,也可以抛出异常 ...

  2. JavaSE-12 面向对象程序设计的几条基础原则

    摘取代码中变化的行为,形成接口 在设计基类的时候,如果该类某个成员方法在子类中的实现变化差别比较大(一部分子类实现该方法是相同的),作为基类有两个问题:一是该方法不再通用:二是子类如果重写该方法,存在 ...

  3. 第3节 mapreduce高级:7、自定义outputformat实现输出到不同的文件夹下面

    2.1 需求 现在有一些订单的评论数据,需求,将订单的好评与差评进行区分开来,将最终的数据分开到不同的文件夹下面去,数据内容参见资料文件夹,其中数据第九个字段表示好评,中评,差评.0:好评,1:中评, ...

  4. live555简介

    live555 编辑   目录 1live555简介 2Live555 Streaming Media整体框架 3openRTSP客户端流程     1live555简介编辑 Live555 是一个为 ...

  5. C++暂停黑窗口

    C++中采用system("pause");来暂停黑窗口,那么操纵系统就会将窗口暂停,显示“请按任意键继续. . .” 我们用VS执行代码是,若直接按键盘的F5(开始调试),那么窗 ...

  6. buf.values()

    buf.values() 返回:{Iterator} 创建并返回一个包含 Buffer 值(字节)的迭代器.当 Buffer 使用 for..of 声明时将自动调用该函数. const buf = B ...

  7. Java中的日期、时间操作

    每次在处理日期时间的时候都要打开chrome查找一番,索性自己找一下满意的记录下来. 一.时间格式 // hh表示12小时制: HH表示24小时制 SimpleDateFormat format1 = ...

  8. 又一个ajax实例,结合jQuery

    又一个ajax实例,配合jQuery   html <!DOCTYPE html> <html lang="zh-cn"> <head> < ...

  9. 2014-4-5安装python以及基础知识

    1.下载安装 从python官网下载python2.7.6 https://www.python.org/download/releases/2.7.6 建议用迅雷下载 会比较快 2.交互式解释器 运 ...

  10. BNUOJ 1541 Air Raid

    Air Raid Time Limit: 1000ms Memory Limit: 10000KB This problem will be judged on PKU. Original ID: 1 ...