问题描述

iOS系统下，移动web页面，inpu获取焦点弹出系统虚拟键盘时，偶尔会出现挡住input的情况，尽管概率不大，但是十分影响用户体验。

问题重现

原始页面：页面中有header、main、footer三部分，其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部。

其中，footer 中有一个input 输入框。

点击 input 框使之获取焦点，唤起虚拟键盘，正常页面效果如下：

注：在ios系统唤起软键盘，键盘和底部输入框之间有一块空白间距。

但是偶尔会出现软键盘挡住input框的情况，如下：

针对此问题，目前没有十分有效的方法，只能通过js调整input输入框的位置，使之出现在正常的位置。

解决方法

scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。

alignWithTop 若为 true，或者什么都不传，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐；
alignWithTop 若为 false，调用元素会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐，不过顶部不一定平齐。
支持的浏览器：IE、Chrome、Firefox、Safari和Opera。
该方法是唯一一个所有浏览器都支持的方法，类似还有如下方法，但是只有在Chrome和Safari有效：
scrollIntoViewIfNeeded(alignCenter)
scrollByLines(LineCount)
 
代码如下：

再次测试，效果如下：

相比于input被挡住，突兀地出现在页面中间更加可以令人接受，但是多次测试，仍然存在问题：当切换输入法的时候，input框的位置会往下移动，被键盘挡住一部分，而且出现的概率比较高（中英文切换），效果如下：

针对这个问题，后期仍需要继续调试和优化。

针对input输入框被虚拟键盘挡住的问题，还有一个类似的解决方案：

当软键盘被唤起是，使用 scrollTop() 方法使input元素滚动到指定的位置，但是滚动的具体数值需要调试才能给出，所以这里就不再演示了。

虚拟键盘挡住输入框一直是web开发中的一个无法避免且令人头疼的问题，希望有人能够想出的更好的办法，如果是浏览器或者系统的问题，希望官方可以尽快解决。

参考资料：

https://www.zhihu.com/question/32746176

http://www.tuicool.com/articles/j6zuIbn

http://blog.sina.com.cn/s/blog_637918a80101rsjh.html

Demo 完整代码：

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3   <head>
  4.  4     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  5.  5     <title><%= title %></title>
  6.  6     <link rel='stylesheet' href='/css/style.css' />
  7.  7     <script src="/js/jquery-3.1.1.min.js" charset="utf-8"></script>
  8.  8     <style>
  9.  9       html, body {
  10. 10         height: 100%;
  11. 11         padding: 0;
  12. 12         margin: 0;
  13. 13       }
  14. 14       header {
  15. 15         position: fixed;
  16. 16         top: 0;
  17. 17         left: 0;
  18. 18         z-index: 9999;
  19. 19         width: 100%;
  20. 20         height: 50px;
  21. 21         line-height: 50px;
  22. 22         font-size: 18px;
  23. 23         text-align: center;
  24. 24         background: #ccc;
  25. 25       }
  26. 26       main {
  27. 27         position: absolute;
  28. 28         top: 50px;
  29. 29         bottom: 10px;
  30. 30         left: 20px;
  31. 31         width: 100%;
  32. 32         margin-bottom: 50px;
  33. 33         /* 使之可以滚动 */
  34. 34         overflow-y: scroll;
  35. 35         /* 增加该属性，可以增加弹性，是滑动更加顺畅 */
  36. 36         -webkit-overflow-scrolling: touch;
  37. 37       }
  38. 38       footer {
  39. 39         position: absolute;
  40. 40         bottom: 0;
  41. 41         left: 0;
  42. 42         width: 100%;
  43. 43         height: 50px;
  44. 44         line-height: 50px;
  45. 45         text-align: center;
  46. 46         background: #666;
  47. 47         border-top: 1px solid #e6e6e6;
  48. 48       }
  49. 49       footer input {
  50. 50         display: inline-block;
  51. 51         width: 90%;
  52. 52         height: 20px;
  53. 53         font-size: 14px;
  54. 54         outline: none;
  55. 55         border: 1px solid #e6e6e6;
  56. 56         border-radius: 5px;
  57. 57       }
  58. 58     </style>
  59. 59   </head>
  60. 60   <body>
  61. 61     <header>
  62. 62       This is the header
  63. 63     </header>
  64. 64     <main>
  65. 65       <h1><%= title %></h1>
  66. 66       <p>Welcome to <%= title %></p>
  67. 67       <ul>
  68. 68         <li>Today</li>
  69. 69         <li>is</li>
  70. 70         <li>Sunday</li>
  71. 71         <li>And</li>
  72. 72         <li>I</li>
  73. 73         <li>have</li>
  74. 74         <li>to</li>
  75. 75         <li>go</li>
  76. 76         <li>to</li>
  77. 77         <li>work</li>
  78. 78         <li>tomorrow</li>
  79. 79       </ul>
  80. 80     </main>
  81. 81     <footer>
  82. 82       <input type="text" placeholder="Type here...">
  83. 83     </footer>
  84. 84   </body>
  85. 85   <script type="text/javascript">
  86. 86     $(function() {
  87. 87       $('input').on('click', function () {
  88. 88         var target = this;
  89. 89         // 使用定时器是为了让输入框上滑时更加自然
  90. 90         setTimeout(function(){
  91. 91           target.scrollIntoView(true);
  92. 92         },100);
  93. 93       });
  94. 94     })
  95. 95   </script>
  96. 96 </html>

　　

iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案的更多相关文章

  1. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  2. 手机端input获取焦点弹出键盘时挡住input解决方案

    问题重现 原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有 ...

  3. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  4. 移动H5页面，Android手机下，input获取焦点弹出系统虚拟键盘时，挡住input解决方法

    最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示  IOS端显示情况 Android端显示情况 解决方式: <t ...

  5. input获取焦点弹出系统虚拟键盘时，挡住input解决方法

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内. <input type="tel" placeholder="输入 ...

  6. 关于Android中EditText自动获取焦点并弹出键盘的相关设置

    在android开发中,关于EditText自动获取焦点弹出键盘,我们可能又是会有让键盘自动弹出的需求,有时可能又会有不想让键盘自动弹出的需求,下面是我所总结的两种方法: 需求:EditText自动获 ...

  7. 【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼

    前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望 ...

  8. IOS开发之自定义系统弹出键盘上方的view(转载)

    这篇文章解决的一个开发中的实际问题就是:当弹出键盘时,自定义键盘上方的view.目前就我的经验来看,有两种解决方法.一个就是利用UITextField或者UITextView的inputAccesso ...

  9. （Vue）移动端点击输入框，弹出键盘，底部被顶起问题

    (Vue)移动端点击输入框,弹出键盘,底部被顶起问题:https://www.jianshu.com/p/210fbc846544 问题描述:Vue开发中,当我们相对于父视图的底部布局子控件时,需要用 ...

随机推荐

  1. JDK,TomCat安装配置

    JDK.Tomcat.myEclipse安装配置 准备安装包 JAVA运行环境包 JDK1.7下载地址: http://www.veryhuo.com/down/html/43205.html Jsp ...

  2. sqlserver 2000新建sysadmin角色

    新建登录:sp_addlogin 'netcafe','pubwin'  netcafe是用户名,pubwin是密码,下面是msdn官方格式: sp_addlogin [ @loginame = ] ...

  3. python 在linux下通过top,和dh命令获得cpu,内存，以及硬盘信息

    主要是通过os.popen读取命令输出实现的,os.popen启动新的进程,且将外部命令的输出作为文件类型对象返回.不能获得外部命令的返回值.既然是文件对象就可以直接用for in 来读取,代码如下: ...

  4. iOS开发多线程-多线程技术1

    一.基本概念 1.什么是进程 进程就是指在系统中正在运行的一个应用程序 每个应用之间是相互独立的 每个进程都运行在其专有的并且受保护的内存空间内. 2.什么是线程 一个进程想要执行程序,就必须需要一个 ...

  5. web技术之图片预加载

    http://www.cnblogs.com/rt0d/archive/2011/04/17/2018646.html http://www.oschina.net/code/snippet_5437 ...

  6. KL25用SPI操作nor flash

    KL25的SPI连接一个nor flash.该flash型号为FM25F04,支持SPI的模式0和模式3,要求高位先发送,在上升沿采集数据. 通常,SPI有4种模式,取决于CPOL与CPHA如何配置. ...

  7. USB系列之三：从你的U盘里读出更多的内容

    U盘是我们最常使用的一种USB设备,本文继续使用DOSUSB做驱动,试图以读取扇区的方式读取你的U盘.本文可能涉及的协议可能会比较多. 一.了解你的U盘    首先我们用上一篇文章介绍的程序usbvi ...

  8. TENX_ASM.uew

    /L14"TENX ASM" Nocase Line Comment = ; File Extensions = INC ASM LST H /Colors = ,,,,, /Co ...

  9. 锁机制与原子操作 <第四篇>

    一.线程同步中的一些概念 1.1临界区(共享区)的概念 在多线程的环境中,可能需要共同使用一些公共资源,这些资源可能是变量,方法逻辑段等等,这些被多个线程共用的区域统称为临界区(共享区),临界区的资源 ...

  10. 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.0

    /** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...