This is just my side of the solution

1. Premise: The page height is limited, the input box is at the bottom of the page, and it is an Android device. IOS does not have this problem

2. Solutions

  • Use scrollIntoView to scroll elements into the visible area of the page
  • Add placeholder area to the page to hold up the keyboard height (the page height is not enough, so it will still be blocked by the keyboard)
  • Focus and blur control the visibility or height of placeholders (good low)

The scene keyboard is overlaid on top of the WebView, so the page resize event does not take effect

page

// placeholder elements
<div id="btm-keyboard-div"></div>
/ / input box
<input
pattern="[0-9] *"
    :value="data.value"
        @focus="focusEvent($event)"
            @blur="blurEvent"
                type="number"
                      placeholder="Input price, such as 1,000"
                            @change="inputEvent(key, idx, $event)"
                                @input="inputEvent( key, idx, $event)" />
                                
Copy the code

Js method

function focusEvent(e){
    if(isAndroid){        
        let ele = e.target
        let kdv = document.getElementById('btm-keyboard-div')
        kdv.style = 'height: 1000px'
        ele.scrollIntoView(true)// Scroll is related to the parent element, note the CSS Settings, and ture needs to display the incoming element}}function blurEvent(){
    let kdv = document.getElementById('btm-keyboard-div')
    kdv.style = 'height:0px'

 }
Copy the code

The height of the keyboard is about 1000px, so this height is not very accurate, but it can solve the problem, so for now