作者:猿奇
链接:www.jianshu.com/p/9d8c7b7558d8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
如有疑问,可评论联系作者,热心解答,从不怼人。。。
本文主要解决两个坑
input && textarea
1、软键盘遮住输入框
2、全屏显示页面时,软键盘遮住输入框
1、普通软键盘遮住输入框
让content向上滚动 软键盘的高度
import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
@Component({...})
export class MyPage{
@ViewChild(Content) content: Content;
scrollTokeyboardHeight() {//让content向上滚动 软键盘的高度
this.content.scrollTo(0,e.keyboardHeight);
}
}
然而……
有朋友问了:content是没有滚动的,div 设置的overflow: scroll
div里面有input/textarea 要怎么破?这个简单:
//加上这个就好了
var scrollDiv= document.getElementById('scrollDiv');
scrollDiv.scrollTop = scrollDiv.scrollHeight;
2、全屏显示页面时,软键盘遮住输入框
statusBar.hide();//让APP全屏显示
然而,在有input 框、textarea框在底部的页面,软键盘就遮住了输入框,无法撑起高度,怎么办呢?
解决思路:
在focus时, statusBar.show();
在blur时, statusBar.hide();
嘎哈,OK了!!!
有问题评论问作者哟!