如何从手机上的键盘永久禁用 ionic 3 中的大写锁定按钮？

Question

在我的 ionic3 应用程序中，我希望用户只能输入小写字母，因此我想永久禁用 Caps Lock 按钮。

我用的是autocapitalize='off'，但它只是第一次工作，用户可以关闭它。

我应该怎么做才能解决这个问题？

这是我的代码

<ion-item no-padding transparent>
                <ion-label floating>{{data.username}}</ion-label>
                <ion-input required type="text" [(ngModel)]="username" formControlName="text" autocapitalize='off'></ion-input>
            </ion-item>
            <!---Input field password-->
            <ion-item no-padding transparent>
                <!--<ion-icon name="lock"></ion-icon>-->
                <ion-label floating>{{data.password}}</ion-label>
                <ion-input required type="password" [(ngModel)]="password" formControlName="password"></ion-input>
            </ion-item>

Answer 1

您可以创建自己的directive 以确保输入的内容始终为小写。该指令如下所示：

import { Directive, EventEmitter, HostListener, Output } from '@angular/core';

@Directive({
  selector: '[ngModel][lowercase]'
})
export class LowercaseDirective {
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  value: any;

  @HostListener('input', ['$event']) onInputChange($event) {
    this.value = $event.target.value.toLowerCase();
    this.ngModelChange.emit(this.value);
  }
}

然后您可以在输入中使用它，如下所示：

<!-- Notice the lowercase attribute in the ion-input element -->

<ion-item no-padding transparent>
  <ion-label floating>Type some uppercase letters here...</ion-label>
  <ion-input required type="text" lowercase [(ngModel)]="text"></ion-input>
</ion-item>

也请看一下这个工作演示：Stackblitz demo