Solution to the problem of bounce blanks and scrolling through soft keyboard on iOS mobile

introduction

When doing h5 mobile projects, it is necessary to give users a very friendly experience. Recently I took the time to sort out two common problems in mobile (iOS) projects

The keyboard pops up blank

Click on usinputWhen the phone keyboard pops up, after clicking, a blank space of the same size as the keyboard will often appear at the bottom. However, when we scroll down the page, it is better. This is a very common problem on the iOS side (it should be caused by layout positioning, and the specific reason has not been studied carefully). The solution is to control the scrollbar offset when the input is finished.

Here are the relevant codes:

.inTouch {
  -webkit-overflow-scrolling: auto;
}
.noTouch {
  -webkit-overflow-scrolling: touch;
}

import Vue from 'vue'
('resetPage', {
  inserted (el) {
    ('focusin', () => {
      if (/(iPhone|iPad|iPod|iOS)/()) {
        // Processing of event of soft keyboard collapse        setTimeout(() => {
          ('body')[0].className = 'inTouch'
        }, 100)
      }
    })
    ('focusout', () => {
      if (/(iPhone|iPad|iPod|iOS)/()) {
        // Processing of event of soft keyboard collapse        setTimeout(() => {
          const scrollHeight =  ||  || 0
          (0, (scrollHeight - 1, 0))
          ('body')[0].className = 'noTouch'
        }, 100)
      }
    })
  }
})

On iOS, when the element gets focus, we put-webkit-overflow-scrollingThe value of 1000 is set to auto to prevent scrolling and penetration. When the element loses focus, we restore the value to touch so that the scrolling effect of the page will not be lost. At the same time, we control the scrollbar offset1 pixel, solve the problem of blank popping up on the soft keyboard.

About my settings-webkit-overflow-scrollingThere are two more words to say about the attributes:

// -Webkit-overflow-scrolling style is very familiar to everyone. There are two optional values: auto and touch// auto: Use normal scrolling, when your fingers move away from the touch screen, the scrolling will stop immediately.// touch: Use scrolling with rebound effect. When your fingers move away from the touch screen, the content will continue to scroll for a period of time.  The speed of the continued scrolling is proportional to the duration of the scrolling gesture.  A new stack context is also created.// In order to increase the smoothness of scrolling, this style will be added when adapting to iOS mobile terminals.-webkit-overflow-scrolling: touch;

View CompatibilityAfterwards, we found that it is only available on iOS, but there are many problems. The main reason I added here is that when input loses focus, sometimes the entire page will be stuck (this problem iswebviewI found that adding this will solve this problem after adding this, so I put these two together. If you don’t need it, you can add this related one.

I'm usingmint-uiDeveloped mobile terminal, so you can use it like this when entering the box

<mt-field class="l-modal-body-input" v-reset-page :attr="{ maxlength: 15 }" v-model="name" label="Name:"></mt-field>

Rolling penetration problem

This can be said to be a very common problem. When we do pop-up frame scrolling, such as address or timepickerWhen selecting the selector, when we scroll and select, the page at the bottom will also scroll together, which will affect the user's experience to a certain extent. After searching and research, we remove the body'stouchmoveEvents can solve this problem:

// Lock the body scroll bar - mainly solves the penetration of user's pop-up frames when scrolling = function () {
  ('body')[0].addEventListener('touchmove', , {passive: false}) // Block default events}
 = function () {
  ('body')[0].removeEventListener('touchmove', , {passive: false}) // Open the default event}

handler: (e) => {
    ()
}

When we open the picker and other pop-up box, call(), lock scrolling, block default events. Called when closing the pop-up box()Turn on the default event. Although the process is quite troublesome, it can actually solve the problem!

The above are the common problems I encountered when doing iOS mobile projects. For more information about the bounce-up of the iOS soft keyboard and scrolling through, please follow my other related articles!