这里只说我自己这边的解决方案
1. 前提:页面高度有限,input输入框在页面最底部,且是安卓设备,iOS不会有这个问题
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,所以这个高度并不是特别准确,但是能解决问题,所以暂时先这样