问题:键盘遮挡输入框、底部栏和键盘一起移动
方案一:ionFocus、 ionBlur 监听输入框的焦点获取
HTML
<ion-input placeholder="请输入用户名" [(ngModel)]="username" (ionFocus)="focusInput()" (ionBlur)="blurInput()">
JS
focusInput() {
document.body.scrollTop = document.body.scrollHeight;
}
blurInput() {
document.body.scrollTop = this.bfscrolltop;
}
结论:键盘不会被遮挡
产生的问题:1、footer也跟着一起上升了。2、安卓键盘的键盘回收按钮,不会触发上面的方法。3、方法中的document.body.scrollTop的大小对安卓没有影响
方案二:$(window).resize监听页面变化
var windheight = $(window).height(); /*未唤起键盘时当前窗口高度*/
var that = this
//底部栏加在content下面,不使用footer了,监听键盘弹出后隐藏,收起后显示
$(window).resize(function(){
var docheight = $(window).height(); /*唤起键盘时当前窗口高度*/
if(docheight < windheight){ /*当唤起键盘高度小于未唤起键盘高度时执行*/
$('.bottomVersion').css("opacity", 0);
$('.bottomVersion').css("height", 0);
document.body.scrollTop = document.body.scrollHeight;
that.content.scrollToBottom()//安卓App键盘弹出,还是会遮住输入框,但是输入的时候会上升,所以使用ion-content的方法,自动滚动到最后一行。
}else{
setTimeout(() => {//加入延时,不然底部栏会先出现,展示效果不好
document.body.scrollTo(0,0);
$('.bottomVersion').css("opacity", 1);
$('.bottomVersion').css("height", "60px");
document.body.scrollTop = 0;
}, 200);
}
});
focusInput() {
//不加这个方法,iOS浏览器的键盘就不会弹出
document.body.scrollTo(0,80);///目前仅在iOS浏览器有作用
}