App embedded H5 --- iPhone soft keyboard blocks input text

1. The cause of the problem

stay ios in , The soft keyboard is at the top of the page , The pop-up of the soft keyboard will not cause the height of the window to change , Therefore, the input box at the bottom will be blocked .

But in android Next , The soft keyboard is on the same level as the window , So when the soft keyboard pops up , The current window will change , Therefore, there is no such problem .

2. How to monitor the pop-up and hiding of soft keyboard
stay ios The soft keyboard will pop up when you focus in , When the focus is lost, the soft keyboard will be folded

3. Solution
（1）scrollIntoView
（2） Monitor focus and out of focus
（3） Use this scrollIntoView, Ensure that the current input box is outside the original visual area

handleFocus(elem) {
    
   console.log(' The soft keyboard pops up ')
   document.body.style.height = '100vh' +  Soft keyboard height 
   document.querySelector('.' + elem).scrollIntoView();
  }
},
handleBlur() {
    
  document.body.style.height = '100%'
  console.log(' Soft keyboard hidden ')
}

4. About scrollIntoView Introduction to

Element Interface scrollIntoView() Method scrolls the parent container of the element , Cause to be called scrollIntoView() The element is visible to the user .
Reference link ：MDN—scrollIntoView