iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
问题描述
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开发中的一个无法避免且令人头疼的问题，希望有人能够想出的更好的办法，如果是浏览器或者系统的问题，希望官方可以尽快解决。
参考资料：《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()的更多相关文章
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
问题描述 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开发中,当我们相对于父视图的底部布局子控件时,需要用 ...
随机推荐
- 每天一个linux命令---tar
解包/打包语法:tar [主选项+辅选项] 文件或者目录 使用该命令时,主选项是必须要有的,它告诉tar要做什么事情,辅选项是辅助使用的,可以选用. 主选项: c 创建新的档案文件.如果用户想备份一个 ...
- WPF:依赖属性的数据绑定
One of the strengths of WPF is its data binding capabilities. Although data binding is not new (in f ...
- BZOJ4662 : Snow
首先离散化,即相邻关键点之间的部分可以压成一段. 注意到区间互不包含,因此排序后每个位置的清理影响到的是一段连续区间的清理工的工作长度. 这显然可以用线段树维护,支持区间减去一个数,单点加上$inf$ ...
- 【转】ssh登录慢，等待输入密码时间长的解决办法
http://youhuiba.net/2013/06/09/520.html 有时候在ssh远程登录到其他主机上时发现登录时间太长,要等待很久才会出现输入密码的提示,google了一下,发现主要有两 ...
- glup Browsersync
http://www.browsersync.cn/#installhttp://www.browsersync.cn/docs/gulp/http://www.mamicode.com/info-d ...
- BZOJ 1468 & 点分治
题意: 带权树,求距离小于k的点对数目. SOL: 参考http://blog.csdn.net/jiangshibiao/article/details/25738041解决了题意问题... 代码是 ...
- Android入门第八篇之GridView(九宫图)
本文来自http://blog.csdn.net/hellogv/ GridView跟ListView都是比较常用的多控件布局,而GridView更是实现九宫图的首选!本文就是介绍如何使用GridVi ...
- CentOS VirtualBox启动虚拟及报错：VirtualBox error: Kernel driver not installed (rc=1908)
VirtualBox error: Kernel driver not installed (rc=1908) Hi all, Let me first say that this is my fin ...
- My first blog！！！！！
这是我的第一篇blog,希望以后学的知识都能够记录下来,形成记忆,方便查看和学习.如果有朋友看到我blog中的错误,欢迎批评指正,谢谢~\(≧▽≦)/~啦啦啦 以后学的知识要整理出来,方便自己的同时也 ...
- PL/SQL无法连接，提示：pl/sql initialization error sql*net not properly installed
各种找资料都不行,最后还是在公司的线上环境中去找不同点配置好的.不多说了,就做了如下配置: 服务器环境是:windows server 2008 64位操作系统 1.电脑系统环境变量PATH增加:x: ...