实现:
1.ios软键盘弹起时让页面fixed, 定住页面, 修改top值来移动页面当前聚焦的输入框位置, 并且取消fixed, 让页面可以移动, 在监听到touchmove时, 也要让页面是取消fixed状态, 可以滚动当前页面, 点击某个输入框就出现在当前视口中
2. 安卓scrollIntoView就可以了
//* 软键盘事件
_initKeyboardState() {
this.monitorKeyboard = new MonitorKeyboard();
this.monitorKeyboard.onStart();
// 监听虚拟键盘弹出事件
this.monitorKeyboard.onShow(() => {
this.showSaveBtn = this.FLAG.HIDE;
this.isScrollFixed = true;
});
//监听键盘收起的事件
this.monitorKeyboard.onHidden(() => {
this.showSaveBtn = this.FLAG.SHOW;
this.isScrollFixed = false;
});
},
// 软键盘弹出时
async _KeyboardFocus(el, scrollTop = 0) {
this.isScrollFixed = true;
await this._touchmoveFocus();
if (this.isIos) {
this.scrollTop = scrollTop;
} else {
el.scrollIntoView(false);
}
this.$nextTick(() => {
el.focus();
this._getSelectPos(el);
});
},
// 软键盘收起时
_KeyboardBlur() {
this._touchmoveBlur();
if (this.isIos) {
this.$nextTick(() => {
let timer = setTimeout(() => {
this.$refs.rootref.scrollTop = this.scrollTop;
clearTimeout(timer);
timer = null;
}, 40);
});
} else {
document.body.scrollIntoView();
}
},
async _touchmoveFocus() {
document.body.addEventListener("touchmove", this._KeyboardTouchmove, {
passive: false
});
document.body.addEventListener("touchend", this._KeyboardTouchEnd, {
passive: false
});
return new Promise(resolve => {
let timer = setTimeout(() => {
this.$nextTick(() => {
this._KeyboardTouchmove();
clearTimeout(timer);
timer = null;
resolve();
});
});
});
},
_touchmoveBlur() {
document.body.removeEventListener("touchmove", this._KeyboardTouchmove, {
passive: false
});
document.body.removeEventListener("touchend", this._KeyboardTouchEnd, {
passive: false
});
},
_KeyboardTouchmove() {
this.isScrollFixed = false;
!this.firstTouchmove && window.scroll();
this.firstTouchmove = true;
},
_KeyboardTouchEnd() {
this.firstTouchmove = false;
},
_getSelectPos(el) {
if (typeof el.createTextRange !== "undefined") {
var rtextRange = el.createTextRange();
rtextRange.moveStart("character", el.value.length);
rtextRange.collapse(true);
rtextRange.select();
} else if (typeof el.selectionStart !== "undefined") {
el.selectionStart = el.value.length;
el.focus();
}
},
// 点击非输入框的dom隐藏键盘
async hideKeyBoardfn() {
let inputdoms = this.$refs.rootref.querySelectorAll("input,textarea");
Array.from(inputdoms).map(dom => dom.blur());
await new Promise(resolve => setTimeout(resolve, 100));
const keyBoardMgr = requireModule("keyBoardMgr");
keyBoardMgr.hideKeyBoard(() => {});
}
```