input 输入框在页面底部,调起键盘被遮挡问题解决方案

6,716 阅读1分钟

这里只说我自己这边的解决方案

1. 前提:页面高度有限,input输入框在页面最底部,且是安卓设备,iOS不会有这个问题

7551643189325_.pic.jpg 7541643189324_.pic.jpg

2.解决方案

  • 使用scrollIntoView 让元素滚动到页面可视区域
  • 页面增加占位区域撑起键盘高度(页面高度不够,所以还是会被键盘遮挡)
  • focus 和 blur控制占位元素的显隐 或者 高度(好low)

此场景键盘是盖在webview上面,所以页面的resize事件不生效了

页面

//占位元素
<div id="btm-keyboard-div"></div>
// 输入框
<input
pattern="[0-9]*"
    :value="data.value"
        @focus="focusEvent($event)"
            @blur="blurEvent"
                type="number"
                      placeholder="输入价格,如1,000"
                            @change="inputEvent(key, idx, $event)"
                                @input="inputEvent( key, idx, $event)" />
                                

js方法

function focusEvent(e){
    if(isAndroid){        
        let ele = e.target
        let kdv = document.getElementById('btm-keyboard-div')
        kdv.style = 'height: 1000px'
        ele.scrollIntoView(true)//滚动跟父元素有关系,注意css设置,且ture需要显示传入
    }
}

function blurEvent(){
    let kdv = document.getElementById('btm-keyboard-div')
    kdv.style = 'height:0px'

 }

该方案写死了键盘高度大概1000px,所以这个高度并不是特别准确,但是能解决问题,所以暂时先这样