ionic3 软键盘遮住输入框 含全屏显示页面时

作者:猿奇
链接: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了!!!

有问题评论问作者哟!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,846评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,134评论 25 709
  • 夏夜倚窗听风雨,啸啸风吹阳台摇。落雨无声湿卉叶,滋润芳草萋萋照。夜色路上车行慢,灯暗滴滴打杆头。一夜无话自斟盏,半...
    甘朝武阅读 145评论 0 0
  • 如果 今天的阳光绚烂 它普照大地 想必 喜悦定生根 定发芽 ...
    孙浒胡阅读 190评论 0 5
  • “李修齐,你想怎样,逃课、顶撞老师打同学。你以前不是门门课第一吗?不是三好学生吗?现在的你到底怎么了?怎么变得...
    修齐的阳光阅读 552评论 0 0