玉林市乾亨网络科技有限公司
首页 | 联系方式 | 加入收藏 | 设为首页 | 手机站

产品目录

联系方式

联系人:业务部
电话: 00134-855122
邮箱:service@nnbongruidatong.com

当前位置:首页 >> 新闻中心 >> 正文

ios底部输入框输入时被隐藏的bug解决

字号:
摘要:ios底部输入框输入时被隐藏的bug解决

最近做项目的时候,底部的输入框用了fixed定位固定在底部,当点击输入时,键盘弹起盖住了输入框问题,小编对此问题进行了分析,给了一个完美的解决的方法,方法如下demo。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta content="no-cache" http-equiv="pragma">
 <meta name="screen-orientation" content="portrait" />
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="format-detection" content="telephone=no">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta name="full-screen" content="yes">
 <meta name="x5-fullscreen" content="true">
 <title>底部输入框被隐藏的bug解决</title>
 <style>
 * {
 padding: 0;
 margin: 0;
 }
 html,
 body,
 .container {
 height: 100%;
 width: 100%;
 }
 .container {
 display: flex;
 display: -webkit-flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
 background: #fff;
 }
 .content {
 flex: 1;
 -webkit-flex: 1;
 width: 100%;
 position: relative;
 overflow-y: scroll;
 }
 .foot {
 height: 32px;
 border-top: 1px solid #999;
 background: #fff;
 padding: 6px 10px;
 }
 .foot input {
 height: 100%;
 width: 100%;
 border: 1px solid #666;
 outline: 0;
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="content">
 <div>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 <p>这里写内容</p>
 </div>
 </div>
 <div class="foot">
 <input type="text" placeholder="请输入试试">
 </div>
 </div>
</body>

效果如下图:

采用此方法布局方式,就会避免输入框被盖住的bug了。希望大家发现这样的需求,首先考虑这样的布局,谢谢大家能采用。

其实,可以通过以下方法:
scrollIntoView() 
scrollIntoViewIfNeeded()
因为是新的特征,不建议在老的浏览器上面使用者两个方法,但是一般的主流浏览器都可以使用,方式如下:
<label for="name"></label>
<input type="text" value="" id="name" onclick="intoView(this)">
function intoView(el) {
 setTimeout(function() {
 el.scrollIntoViewIfNeeded();
 }, 500);
}
这里加上一个延迟是因为很多安卓手机虚拟键盘延迟启动,而之所以用click事件而不是focus事件是因为每次点击输入框都能够执行这个方法。