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

来源：互联网发布：nemo软件好用吗编辑：程序博客网时间：2024/05/29 09:57

最近做项目的时候，底部的输入框用了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事件是因为每次点击输入框都能够执行这个方法。

阅读全文

0 0