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

最新推荐文章于 2022-07-20 11:14:37 发布

拼搏的小叔

最新推荐文章于 2022-07-20 11:14:37 发布

阅读量2k

点赞数

分类专栏： js_studyShare js_bug js_技巧文章标签：输入框被键盘盖住 ios固定定位bug 固定定位bug 输入框

本文链接：https://blog.csdn.net/js_admin/article/details/76221342

版权

js_studyShare 同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

js_技巧

20 篇文章 0 订阅

订阅专栏

js_bug

5 篇文章 0 订阅

订阅专栏

最近做项目的时候，底部的输入框用了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" οnclick="intoView(this)">

function intoView(el) {
  setTimeout(function() {
    el.scrollIntoViewIfNeeded();
  }, 500);
}

这里加上一个延迟是因为很多安卓手机虚拟键盘延迟启动，而之所以用click事件而不是focus事件是因为每次点击输入框都能够执行这个方法。

拼搏的小叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ios底部输入框输入时被隐藏的bug解决

最近做项目的时候，底部的输入框用了fixed定位固定在底部，当点击输入时，键盘弹起盖住了输入框问题，小编对此问题进行了分析，给了一个完美的解决的方法，方法如下demo。底部输入框被隐藏的bug解决 * { padding: 0; margi
复制链接

扫一扫