iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
问题描述
iOS系统下，移动web页面，inpu获取焦点弹出系统虚拟键盘时，偶尔会出现挡住input的情况，尽管概率不大，但是十分影响用户体验。
问题重现
原始页面：页面中有header、main、footer三部分，其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部。
其中，footer 中有一个input 输入框。
点击 input 框使之获取焦点，唤起虚拟键盘，正常页面效果如下：
注：在ios系统唤起软键盘，键盘和底部输入框之间有一块空白间距。
但是偶尔会出现软键盘挡住input框的情况，如下：
针对此问题，目前没有十分有效的方法，只能通过js调整input输入框的位置，使之出现在正常的位置。
解决方法
scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。
再次测试，效果如下：
相比于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 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
5 <title><%= title %></title>
6 <link rel='stylesheet' href='/css/style.css' />
7 <script src="/js/jquery-3.1.1.min.js" charset="utf-8"></script>
8 <style>
9 html, body {
10 height: 100%;
11 padding: 0;
12 margin: 0;
13 }
14 header {
15 position: fixed;
16 top: 0;
17 left: 0;
18 z-index: 9999;
19 width: 100%;
20 height: 50px;
21 line-height: 50px;
22 font-size: 18px;
23 text-align: center;
24 background: #ccc;
25 }
26 main {
27 position: absolute;
28 top: 50px;
29 bottom: 10px;
30 left: 20px;
31 width: 100%;
32 margin-bottom: 50px;
33 /* 使之可以滚动 */
34 overflow-y: scroll;
35 /* 增加该属性，可以增加弹性，是滑动更加顺畅 */
36 -webkit-overflow-scrolling: touch;
37 }
38 footer {
39 position: absolute;
40 bottom: 0;
41 left: 0;
42 width: 100%;
43 height: 50px;
44 line-height: 50px;
45 text-align: center;
46 background: #666;
47 border-top: 1px solid #e6e6e6;
48 }
49 footer input {
50 display: inline-block;
51 width: 90%;
52 height: 20px;
53 font-size: 14px;
54 outline: none;
55 border: 1px solid #e6e6e6;
56 border-radius: 5px;
57 }
58 </style>
59 </head>
60 <body>
61 <header>
62 This is the header
63 </header>
64 <main>
65 <h1><%= title %></h1>
66 <p>Welcome to <%= title %></p>
67 <ul>
68 <li>Today</li>
69 <li>is</li>
70 <li>Sunday</li>
71 <li>And</li>
72 <li>I</li>
73 <li>have</li>
74 <li>to</li>
75 <li>go</li>
76 <li>to</li>
77 <li>work</li>
78 <li>tomorrow</li>
79 </ul>
80 </main>
81 <footer>
82 <input type="text" placeholder="Type here...">
83 </footer>
84 </body>
85 <script type="text/javascript">
86 $(function() {
87 $('input').on('click', function () {
88 var target = this;
89 // 使用定时器是为了让输入框上滑时更加自然
90 setTimeout(function(){
91 target.scrollIntoView(true);
92 },100);
93 });
94 })
95 </script>
96 </html>
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案的更多相关文章
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...
- 手机端input获取焦点弹出键盘时挡住input解决方案
问题重现 原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有 ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- 移动H5页面，Android手机下，input获取焦点弹出系统虚拟键盘时，挡住input解决方法
最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示 IOS端显示情况 Android端显示情况 解决方式: <t ...
- input获取焦点弹出系统虚拟键盘时，挡住input解决方法
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内. <input type="tel" placeholder="输入 ...
- 关于Android中EditText自动获取焦点并弹出键盘的相关设置
在android开发中,关于EditText自动获取焦点弹出键盘,我们可能又是会有让键盘自动弹出的需求,有时可能又会有不想让键盘自动弹出的需求,下面是我所总结的两种方法: 需求:EditText自动获 ...
- 【小贴士】zepto find元素以及ios弹出键盘可能让你很头疼
前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望 ...
- IOS开发之自定义系统弹出键盘上方的view(转载)
这篇文章解决的一个开发中的实际问题就是:当弹出键盘时,自定义键盘上方的view.目前就我的经验来看,有两种解决方法.一个就是利用UITextField或者UITextView的inputAccesso ...
- （Vue）移动端点击输入框，弹出键盘，底部被顶起问题
(Vue)移动端点击输入框,弹出键盘,底部被顶起问题:https://www.jianshu.com/p/210fbc846544 问题描述:Vue开发中,当我们相对于父视图的底部布局子控件时,需要用 ...
随机推荐
- memcmp()直接比较两个数组的大小
两个字符数组可以用strcmp()比较大小.两个整数数组也有个函数memcmp()可以比较大小,和strcmp()的返回值一样的. 头文件#include<cstring> / #incl ...
- 32位的CPU最多只能支持最大到4GBytes的内存
和总线宽度相似的,CPU每次能够处理的数据量称为字组大小(word size), 字组大小依据CPU癿设计而有32位与64位.我们现在所称的计算机是32或64位主要是依据这个 CPU解析的字组大小而来 ...
- css 背景图片拉伸[转]
http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-bac ...
- oc语言--BLOCK和协议
一.BOLCK (一)简介 BLOCK是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,BLOCK可以在任何时候执行. BOLCK和函数的相似性:(1)可以保存代码(2 ...
- SQL查询 addScalar()或addEntity()
Hibernate除了支持HQL查询外,还支持原生SQL查询. 对原生SQL查询执行的控制是通过SQLQuery接口进行的,通过执行Session.createSQLQuery()获取这个接口.该 ...
- Ext常用Tool
Ext.onReady(function() { var mPanel = Ext.create('Ext.panel.Panel', { title: 'Panel', width: '100%', ...
- 2014第3周三JS进阶书籍
本来想尝试每天回答或看已解决的3个问题来学习总结今天的知识点,看了下博文里面的问答,在问的和已解决的都提不起兴趣.就看了下知识库里面一些文章,把里面感觉好的段落再摘录一下,为自己再看时备忘. 第一阶段 ...
- 大数据时代的数据存储，非关系型数据库MongoDB（一）
原文地址:http://www.cnblogs.com/mokafamily/p/4076954.html 爆炸式发展的NoSQL技术 在过去的很长一段时间中,关系型数据库(Relational Da ...
- Wap touch flispan demo
直接上代码了 仔细看看例子就会明白 简单实用 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8& ...
- 【转】C++ STL 相关的问题集合
3.C++ STL中vector的相关问题: (1).调用push_back时,其内部的内存分配是如何进行的? (2).调用clear时,内部是如何具体实现的?若想将其内存释放,该如何操作 ...