Question

我在离子2中创建应用程序当我点击输入字段键盘打开我想要更改背景图像无当我关闭键盘需要背景图像

<ion-content padding class="bg_gogreen">

<ion-list>
  <ion-item class="input-border">
    <ion-input  type="number" placeholder="Enter your Mobile Number"></ion-input>
    <ion-icon name='ios-contact' class="phone" item-right persianred></ion-icon>
  </ion-item>
</ion-list>

班级名称bg_gogreen我需要删除此课程或更改为背景图片无

.bg_gogreen{
    background-image: url(../../img/bg_gogreen.png);
    background-position: center bottom;
    background-repeat: no-repeat;
      background-size: 100%;
}

file.ts

import {NavController} from 'ionic-angular';  
   export class MverifyPage{
      constructor(private nav: NavController, 
                  private keyboard: Keyboard
                  ) {

                    this.keyboard = keyboard;
                    this.keyboard.isOpen(this.openCallback);
                    this.keyboard.onClose(this.closeCallback);
                }
                  openCallback(){


                }

                  closeCallback(){

                }

两个错误属性键盘没有退出，并且找不到名称键盘

Answer 1

您可以尝试这样的事情：

<ion-content padding [class.bg_gogreen]='isGreen'">

<ion-list>
  <ion-item class="input-border">
    <ion-input  type="number" placeholder="Enter your Mobile Number" (focus)='isGreen=true' (blur)='isGreen=false'></ion-input>
    <ion-icon name='ios-contact' class="phone" item-right persianred></ion-icon>
  </ion-item>
</ion-list>

根据组件变量bg_gogreen设置类isGreen。 isGreen和focus

的blur值发生了变化

不要忘记宣布isGreen：

export class MverifyPage{
   ...
   isGreen: boolean = false;
   ...
}

angular 2在打开和关闭时添加和删除类键盘

1 个答案: