Ionic 无输入的离子显示键盘

46qrfjad  于 12个月前  发布在  Ionic
关注(0)|答案(2)|浏览(128)

我正在做一个Ionic/Angular应用程序,我想问我是否可以按下一个按钮来显示没有输入元素的键盘?如果我不能这样做,最好的方法是执行一个不可见的输入和隐藏所有的边框,轮廓,输入笔划和检索输入onchange值?
更新:我目前正在这样做,但这不能检测到一个退格键按下时,文本字段是空的。

<ion-input (ionInput)="inputChange($event)" class="input" [attr.maxlength]="1"></ion-input>

我要做的是执行类似于以下图像的操作。通过点击任何框,它将显示一个移动的键盘。

p8h8hvxi

p8h8hvxi1#

您可以在输入框中设置focus(),自动激活键盘。因此,执行必要的导入并遵循示例。
在.html文件中:

<ion-input #autofocus type="text" formControlName="userName" placeholder="Nome e sobrenome"></ion-input>

在.ts文件中:

@ViewChild('autofocus', {static: false}) inputElement: IonInput;

同样在AfterViewInit函数上:

ngAfterViewInit() {
  setTimeout(() => {
    this.inputElement.setFocus();
  }, 300);
}
qyswt5oh

qyswt5oh2#

我发现了一个“更快”,也可能比其他等待300毫秒超时的答案更可靠的方法:
https://stefvanlooveren.me/blog/set-auto-focus-ionic-input-ionic-6-and-angular-13

<ion-input #emailInput type="text" value="" [formControlName]="'username'"> 
</ion-input>

import {AfterViewChecked, Component, ElementRef, ViewChild} from 
'@angular/core';

import {FormBuilder, FormControl, FormGroup, Validators} from 
'@angular/forms';
import {IonInput} from '@ionic/angular';

@Component({
    selector: 'app-login',
    templateUrl: 'login.page.html'
})

@AutoUnsubscribe
export class LoginPage implements OnInit, OnDestroy, AfterViewChecked {
public loginForm!: FormGroup;
focusIsSet!: boolean;
@ViewChild('emailInput', {static: false}) emailInput!: IonInput;

constructor(
    private readonly fb: FormBuilder,
) {...}

public ngAfterViewChecked(): void {
  if (!this.focusIsSet) {
    this.emailInput.setFocus();
    // Disable focus on setTimeout()
    // Timeout needed for buggy behavior otherwise!
  setTimeout(() => {this.focusIsSet = true; }, 1000);
  }
}
}

基本上它的工作原理是重试,直到它工作。但即使是这种解决方案也可以改进。您可能希望使用setInterval设置最大尝试次数和延迟,以便仅每100ms尝试一次。然后在ngAfterViewInit中执行此操作。

相关问题