Angular+ionic2 控制键盘开启和关闭状态下的页面样式

问题描述：在手机端输入框获取焦点，键盘开启的状态会遮蔽输入框；

解决：键盘开启时，页面整体往上移动，关闭时再恢复原本样式。

 

步骤一：设置页面监听；

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams, IonicPage, ViewController, Content } from 'ionic-angular';
import { MsgBarService } from '../../../common/msg-bar';
import { UserService } from '../user.service';
import { Observable } from 'rxjs';
@IonicPage({
  name: 'LoginIn',
  segment: 'LoginIn'
})

@Component({
  selector: 'page-login-in',
  templateUrl: 'login-in.html',
})
export class LoginInPage {
  userNum;
  password;
  height = 0;//通过该值记录键盘的状态
  keyboardOpenCSS:boolean=false;//控制键盘开启和关闭时的样式
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private msg: MsgBarService,
    public viewCtrl: ViewController,
    private service: UserService) {
  }

  ionViewDidLoad() {
    Observable.fromEvent(window, 'resize').subscribe((event) => {
      let _height = window.innerHeight;
      if (this.height == 0) {
        //初始化,键盘开启
        this.keyboardOpenCSS=true;
        this.height = _height;
      } else if (_height > this.height) {
        //键盘关闭
        this.keyboardOpenCSS=false;
      } else {
        //键盘开启
        this.keyboardOpenCSS=true;
      }
    })
  }

  userNameFun() {
    if (!this.userNum) {
      return;
    }
    if (isNaN(this.userNum)) {
      //截掉非数值字符
      this.userNum = this.userNum.substring(0, this.userNum.length - 1);
    }
  }

}

 

步骤二：html代码

<ion-header>
    <ion-navbar color="primary">
        <ion-title>鸿翔移动应用</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <div [ngClass]="{keyboardOpenCSS: keyboardOpenCSS}">
        <ion-list class="login_top">
            <h1>云南鸿翔一心堂</h1>
            <p class="login_top_sys">移动业务系统</p>
            <p class="login_top_ver">v3.0</p>
        </ion-list>
        <ion-list>
            <ion-item>
                <ion-label>工号：</ion-label>
                <ion-input (keyup)="userNameFun()" type="text" placeholder="请输入7位工号" maxlength="7" [(ngModel)]="userNum"></ion-input>

            </ion-item>

            <ion-item>
                <ion-label>密码：</ion-label>
                <ion-input type="password" placeholder="请输入登录密码" [(ngModel)]="password"></ion-input>
            </ion-item>
        </ion-list>
        <button ion-button full (click)="login()">登录</button>

         <div class="footer">@Right 2018</div>

    </div>
</ion-content>

备注：

①<ion-input>的maxlength属性在类型为text下有效，在number或tel等数值类型下无效。

 

 

步骤三：CSS样式

.footer {
                    position: fixed;
                    bottom: 0px;
                    height: 45px;
                    width: 100px;
                    line-height: 45px;
                    text-align: center;
                    left: 50%;
                    margin-left: -50px;
                }
                .keyboardOpenCSS {
                    margin-top: -190px;
                    .footer {
                        display: none;
                    }
                }

 

 

 

以上。