1, description,

There are many similar examples on the Internet, I also use Vue to write a simple demo, mainly using Flex layout, to solve the problem that the input box is blocked by the keyboard caused by the occasional, fixed or absolute layout on the ios terminal. As for other problems such as the keyboard refolding page, please refer to the link: Summary of h5 page problems on different ios devices is not considered in this demo.

Here’s how it works: Using Flex layout, place the area to scroll in the bottom scroll.

2, performance

On the mobile end, wechat browser, QQ browser and Dingpin browser all perform well. In safri browser, the bottom fixed effect will fail. This problem is quite serious, and I haven’t had time to study the reason carefully

In addition, if the mobile phone is installed with third-party input method, such as Sogou input method, there will still be occlusion problem, there is no problem using the native keyboard. In this demo, in order to solve this problem, when focusing, a margin is added to the bottom, if anyone has a good solution, please leave a message to me

Add margin to reflect the native keyboard:

3, code,

HTML: one parent, two children, parent: Flex-test, child: one for content to scroll, one for footer, fixed at the bottom

<template>
  <div class="flex-test"> <! -- Content area --> <content class="content"> <! --> <header class="header">header</header>
         <ul v-for="(item,index) in datalist" :key="index"> <li>{{item}}</li> </ul> </content> <! -- Bottom input box --> <footer class="footer">
      <input type="text" class="input">
      <button class="button">submit</button>
    </footer>
  </div>
</template>
Copy the code

Js part: The array can be lengthened for scrolling purposes, but I only wrote three for brevity.

<script>
export default {
  name: "pagetest".data() {
    return {
        datalist:[
            "Body data body data body data body data body data."Body data body data body data body data body data."Body data body data body data body data body data]}; },mounted() {// This is a fixed margin at the bottom, in order to solve the third party input method occlusion problem, of course, switch to the native keyboard, also higher document.querySelector()"input").addEventListener("focus", () => {
      document.querySelector("footer").style.marginBottom = "20px"; }); }}; </script>Copy the code

The CSS part:

<style scoped lang="scss"> .flex-test { display: flex; // set flex flex-direction: column; height: 100vh; // Set the height to the screen height. Content {flex: 1; Overflow: auto; overflow: auto; overflow: auto; // webkit-overflow-scrolling: touch; }} // There is nothing special about the CSS, just write the style at the bottom. } .footer { height: 3rem; display: flex; align-items: center; justify-content: space-around; background:#ccc;
  padding: 0 2rem;
  .input {
    width: 200px;
    height: 30px;
     border-radius: 4px;
  }
  .button {
    width: 50px;
    height: 30px;
    background: #fff;
    border-radius: 4px;
  }
}
</style>
Copy the code

Example pictures: