On the mobile end, when you click the input box, the soft keyboard will pop up and the page will be capped. When the focus is lost after input, the page height on ios will not be restored when the soft keyboard is closed, and Android phones will automatically restore the page height.

Solution: Roll the page after the input field loses focus (close the keyboard)

1. Unframed pages

const windowHeight = window.innerHeight
input.addEventListener('blur'.function () {
    let windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
      return
    }
    console.log(windowHeight + The '-' + windowFocusHeight);
    console.log('repair');
    let currentPosition;
    letspeed = 1; / / page scrolling distance currentPosition = document. The documentElement. The scrollTop | | document. The body. The scrollTop; currentPosition -= speed; window.scrollTo(0, currentPosition); // Scroll up currentPosition += speed; // Speed variable window.scrollto (0, currentPosition); // Scroll down the pageCopy the code

2. Use it in vUE

<template>
  <div class="content">
    <input type="text"
       placeholder="Please enter user name" 
       @blur="blur" 
       @focus="focus" 
    />
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      scrollTop: 0
    };
  },
  methods: {
    blur() {
      document.body.scrollTop = this.scrollTop;
    },
    focus() { this.scrollTop = document.body.scrollTop; }},mounted() {}}; </script>Copy the code