时间戳

首页 > 解决方案 > 像whatsapp一样弹出键盘时滚动整个html / body

javascript - 像whatsapp一样弹出键盘时滚动整个html / body

问题描述

我正在使用 html5/javascript/jQuery/css 进行移动应用程序开发。HTML body 包含 Header 、 footer 和中间一个 div。页脚由一个文本框组成，用户可以在其中输入内容。每当用户触摸 textbox 时，都会弹出键盘。问题是每当键盘弹出时，html body 都不会向上移动。如何达到同样的效果？它应该与所有移动设备（Android、ios、windows）兼容。

这是我的html代码

<body onload="hidebtn()">
    <header class="topBar">

        <ul class="nav nav-tabs row" id="myTab" role="tablist">
            <li class="nav-item col">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="chat()">Chat</a>
            </li>
            <li class="nav-item col">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Incident</a>
            </li>
            <li class="nav-item col">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Service Request</a>
            </li>
        </ul>

    </header><br><br>
    <div class="tab-content" id="myTabContent" style="overflow:hidden;">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="container">
                <div class="row h-100">
                    <div id="topButtons" class="card-body" style="padding: 0; margin-top: 12px; height: 80px;"></div>
                    <div id="chatBody" class="card-body anyClass">
                <p class="WC_message_fl"><img class="con_im" src="images\chatrobo.png"></p>
                        <p class="WC_message_f"> Type your Questions & Start chatting </p>
            </br></br>
                    </div>

                </div>
            </div>

        </div>

<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" >
                </br></br>      <p class="WC_message_fl" id='msg_table'></p>
                <div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row"  id="table"></div>
                </div>

                </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" >
                    </br></br>  <p class="WC_message_fl" id='msg_sr_table'></p>
                <div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row" id="sr_table"></div></div>
                </div>

    </div>




        <footer id="footerChtbt" style="position:fixed;bottom:0;right:0;left:0;height: 45px;line-height: 20px;background-color: #ECEFF1;font-size: 0.6rem;border-top: 1px solid #aaa;box-shadow: 0 1px 5px 0 #9B9B9B;">
            <span id="Resp" style="color:blue; position: absolute; z-index: 1000; left: 8vw;"></span>
            <div class="container">
                <div class="row">
                    <div class="col-10">
                        <input id="query" type="text" class="form-control" placeholder = 'Ask sth...'" onkeyup="pressedkey(event)" style="outline:0;box-shadow:none;font-size:14px;" required />
                    </div>
                    <div class="col-2" style="padding: 0; margin-top: 2px;">
                        <img src="images/send_icon.svg" name="submitbtn" onClick="sendbtn()" style="cursor: pointer; width: 40px;">
                    </div>
                </div>
            </div>
        </footer>

标签： javascripthtmlcss

解决方案

无法检测虚拟键盘是否存在，但您不需要这样做。

我在您的 html 中找不到您的输入框，所以我假设它的 id 为“textInput”

let textInput = $("#textInput")
//When the input box gets focused you just have to scroll it into view
textInput.focusin((event) => {
    var elem = event.currentTarget;
    //scrollIntoViewIfNeeded is non standard but supported in many browsers
    if(elem.scrollIntoViewIfNeeded !== undefined) {
        elem.scrollIntoViewIfNeeded()
    } else if(elem.scrollIntoView !== undefined){
        elem.scrollIntoView()
    } else {
        //Fallback if scrollIntoView is not supported
        var offset = textInput.offset()
        $('html, body').animate({
            scrollTop: offset.top,
           scrollLeft: offset.left
        })
    }
})
#textInput {
  position: fixed;
  bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="textInput" type="text">

推荐阅读