问题描述

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开发中的一个无法避免且令人头疼的问题，希望有人能够想出的更好的办法，如果是浏览器或者系统的问题，希望官方可以尽快解决。

参考资料：《JavaScript高级程序设计》P298

Demo 完整代码：

 <!DOCTYPE html>

 <html>

   <head>

     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

     <title><%= title %></title>

     <link rel='stylesheet' href='/css/style.css' />

     <script src="/js/jquery-3.1.1.min.js" charset="utf-8"></script>

     <style>

       html, body {

         height: 100%;

         padding: 0;

         margin: 0;

       }

       header {

         position: fixed;

         top: 0;

         left: 0;

         z-index: 9999;

         width: 100%;

         height: 50px;

         line-height: 50px;

         font-size: 18px;

         text-align: center;

         background: #ccc;

       }

       main {

         position: absolute;

         top: 50px;

         bottom: 10px;

         left: 20px;

         width: 100%;

         margin-bottom: 50px;

         /* 使之可以滚动 */

         overflow-y: scroll;

         /* 增加该属性，可以增加弹性，是滑动更加顺畅 */

         -webkit-overflow-scrolling: touch;

       }

       footer {

         position: absolute;

         bottom: 0;

         left: 0;

         width: 100%;

         height: 50px;

         line-height: 50px;

         text-align: center;

         background: #666;

         border-top: 1px solid #e6e6e6;

       }

       footer input {

         display: inline-block;

         width: 90%;

         height: 20px;

         font-size: 14px;

         outline: none;

         border: 1px solid #e6e6e6;

         border-radius: 5px;

       }

     </style>

   </head>

   <body>

     <header>

       This is the header

     </header>

     <main>

       <h1><%= title %></h1>

       <p>Welcome to <%= title %></p>

       <ul>

         <li>Today</li>

         <li>is</li>

         <li>Sunday</li>

         <li>And</li>

         <li>I</li>

         <li>have</li>

         <li>to</li>

         <li>go</li>

         <li>to</li>

         <li>work</li>

         <li>tomorrow</li>

       </ul>

     </main>

     <footer>

       <input type="text" placeholder="Type here...">

     </footer>

   </body>

   <script type="text/javascript">

     $(function() {

       $('input').on('click', function () {

         var target = this;

         // 使用定时器是为了让输入框上滑时更加自然

         setTimeout(function(){

           target.scrollIntoView(true);

         },100);

       });

     })

   </script>

 </html>

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

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

    问题描述 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. 书摘及理解：Servlet与JSP的关系

    “Servlet是服务器端程序,它把应用逻辑嵌入到HTTP请求,在应答过程中可以直接通过PrinteWriter 输出经过逻辑处理后的动态HTML.JSP则是一种特殊的Servlet,它将Java代码 ...

  2. Colorado Potato Beetle(CF的某道) & 鬼畜宽搜

    题意: 一个人在一张大图上走,给你路径与起点,求他走出的矩形面积并.(大概这个意思自行百度标题... SOL: 与其说这是一道图论题不如说是一道生动活泼的STL-vector教学.... 离散化宽搜, ...

  3. Oracle中Cursor的用法

    关键字 概念 类型 异常处理 一 概念 游标是SQL的一个内存工作区,由系统或用户以变量的形式定义.游标的作用就是用于临时存储从数据库中提取的数据块.在某些情况下,需要把数据从存放在磁 盘的表中 ...

  4. 20145308刘昊阳 《Java程序设计》第8周学习总结

    20145308刘昊阳 <Java程序设计>第8周学习总结 教材学习内容总结 第15章 通用API 15.1 日志 15.1.1 日志API简介 java.util.loggging包提供 ...

  5. URAL 1057. Amount of Degrees(数位DP)

    题目链接 我看错题了...都是泪啊,不存在3*4^2这种情况...系数必须为1... #include <cstdio> #include <cstring> #include ...

  6. BZOJ4176: Lucas的数论

    Description 去年的Lucas非常喜欢数论题,但是一年以后的Lucas却不那么喜欢了. 在整理以前的试题时,发现了这样一道题目“求Sigma(f(i)),其中1<=i<=N”,其 ...

  7. 如何更改tableView cell的accessoryView位置,如何让首尾的Separator不显示

    一,如何更改tableView cell的accessoryView位置 1.实则是更改不了的,因此右边总会有一个小边距. 2.可以向 cell 的 contentView 中添加按钮放在右边,与 c ...

  8. 《1Q84》--[日]村上春树

    <1Q84>,作者是:村上春树(村长) 故事梗概: 1984年,青豆与天吾皆为30岁,青豆为健身教练但另一面则是暗杀者,将受到极度暴力 的妇女们的丈夫们送至死亡的世界.天吾的职业为升大学的 ...

  9. linux下tar命令详解

     linux下tar命令详解    tar是Linux环境下最常用的备份工具之一.tar(tap archive)原意为操作磁带文件,但基于Linux的文件操作机制,同样也可适用于普通的磁盘文件.ta ...

  10. Java中的super与this解析

    好了,现在开始讨论this&super这两个关键字的意义和用法. 在Java中,this通常指当前对象,super则指父类的.当你想要引用当前对象的某种东西,比如当前对象的某个方法,或当前对象 ...