Question

我正在开发移动应用程序。我正在使用HTML，CSS，引导程序，JavaScript进行开发。当用户点击页脚内的文本框时，键盘弹出，Android手机的屏幕没有上移，但是对于ios，它运行正常。当用户点击文本框时，我试图向下滚动到底部div。

<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">
        <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_fl sahlaIntro"> Type your Questions & Start chatting</p>
                    </br></br>
                 </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;line-height: 20px;background-color: #ECEFF1;font-size: 0.6rem;border-top: 1px solid #aaa;box-shadow: 0 1px 5px 0 #9B9B9B;">
           <span id="sahlaResp" style="color:blue; position: relative;left: 7vw;top:0;"></span>
           <div class="container">
              <div class="row">
                 <div class="col-10">
                    <input id="query" type="text" class="form-control" placeholder = 'Ask Sahla bot...'" onkeyup="pressedkey(event)" onClick="clickedQuery()" 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: 38px;">
                 </div>
              </div>
           </div>
        </footer>

我试图在单击文本框时向下滚动到div

function clickedQuery() {
    setTimeout(function(){ $("#chatBody").scrollTop($("#chatBody")[0].scrollHeight); }, 100);
};

Answer 1

我一直在检查您的代码，以诚恳地为您清理了一下代码... 如果我们可以正确检查问题，则应该给我们发送链接。但是我会尽力指导您掌握我的一些小信息。

以我的经验，在移动设备上打开键盘时，浏览器会调整大小。向下滚动可访问键盘“重叠”的内容。真正的重叠发生在已将选项设置为在打开键盘时不调整大小的应用程序上。在这种情况下，您永远不要放置可以重叠的输入，或者如果您这样做，可以在获得焦点时将其放置在键盘的顶行上。

通常，您使用position: fixed将输入内容放置在视口的底线的顶部，该底线应与键盘的顶线匹配。

body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
background: #ccc;
}
input {
  margin: 6px;
}
input:focus {
  position:fixed;
  bottom: 0;
  width: calc(100% - 12px);
}

<footer>
  <input id="input" type="text">
</footer>

但是当您报告内容重叠时，如果没有在线版本的代码，我可能无法检查其他内容。因此，另一个解决方案是使用JS来重定位整个页脚。然后，您可以对其进行样式设置，使其看起来更好。

除此之外。我建议您添加一个使输入字段模糊的按钮，以防用户最终不想登顶。这将关闭键盘。Something like this

希望这可以解决您的问题。

$('#input').on('focus', function(){
$(this).parent('footer').css('bottom', '50%');
});

body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 6px;
background: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
  <input id="input" type="text">
</footer>

出现键盘时，屏幕应向上移动而不打扰页脚

1 个答案: