离子输入中的离子聚焦发射两次

Question

>我有一个表单，其中某些输入具有(ionFocus)功能，并将其设置为readonly以禁用键盘弹出窗口，无论如何，当单击输入时，它会重定向到另一个页面(模态)。问题是，其中一个输入触发两次，而另一个输入正常。

这真的很令人困惑，不确定问题出在哪里，或者是否有更好的方法来解决这个问题！

简而言之，单击另一个页面时应该可以毫无问题地打开。

.html：

<form [formGroup]="trainingForm" novalidate>
<ion-item>
<ion-label class="labels" floating>Institution {{institution_required}}</ion-label>
<ion-input type="text" formControlName="institution" readonly="true" (ionFocus)="onInstituteFocus()"></ion-input>
</ion-item>
<br>
<ion-item>
<ion-label class="labels" floating>Country</ion-label>
<ion-input type="text" formControlName="country" readonly="true" (ionFocus)="onCountryFocus()"></ion-input>
</ion-item>
</form>

TS：

onInstituteFocus(){
const institutionCtrl = this.trainingForm.get('institution');
let ModalSearchInstitute = this.modalCtrl.create('SearchInstitutePage', {userInput: this.trainingForm.get('institution').value});
ModalSearchInstitute.onDidDismiss(res => {
if (res !== institutionCtrl.value){
institutionCtrl.markAsDirty(true);
}
if (res !== undefined){
institutionCtrl.patchValue(res);
}
});
institutionCtrl.updateValueAndValidity();
ModalSearchInstitute.present();
}
onCountryFocus(){
const countryCtrl = this.trainingForm.get('country');  
let ModalSearchCountry = this.modalCtrl.create('SearchCountryPage', {userInput: this.trainingForm.get('country').value});
ModalSearchCountry.onDidDismiss(res => {
if (res !== undefined){
countryCtrl.patchValue(res);
}
});
countryCtrl.updateValueAndValidity();      
ModalSearchCountry.present();
}

Answer 1

首先删除 (ionFocus)，然后在 on 和 上添加(点击)事件。它对我有用。

<form [formGroup]="trainingForm" novalidate>
<ion-item>
<ion-label class="labels" (tap)="onInstituteFocus()" floating>Institution {{institution_required}}</ion-label>
<ion-input type="text" formControlName="institution" readonly="true" (tap)="onInstituteFocus()"></ion-input>
</ion-item>
<br>
<ion-item>
<ion-label (tap)="onCountryFocus()" class="labels" floating>Country</ion-label>
<ion-input type="text" formControlName="country" readonly="true" (tap)="onCountryFocus()"></ion-input>
</ion-item>
</form>

希望它对你有用。

Answer 2

ionFocus 也使用 Ionic 4 触发两次，将点击事件附加到 ion-item 只会在浮动标签项/输入的每秒点击时触发一次。

我通过在输入聚焦时分配一个类属性来解决它，就像 OP 对我来说它是一个模态。当被解雇时，我将类属性分配为 null，以便可以在焦点上再次重新打开它，下面是示例代码：

TS

export class homePage {
private _modal: any;
constructor(
private modalController: ModalController
) {}
public async openModal(event): Promise<void> {
if (!this._modal) {
const modal = await this.modalController.create({
component: ModalPage //change to the page you will use as modal
});
modal.onDidDismiss().then((data) => this._modal = null);

this._modal = modal;
await addressModal.present();
}
}
}

.HTML

<ion-row>
<ion-col>
<ion-item>
<ion-label position="floating">Input label</ion-label>
<ion-input type="text" (ionFocus)="openModal()" readonly></ion-input>
</ion-item>
</ion-col>
</ion-row>

Answer 3

我想分享我的解决方案。(或者更确切地说，是一种解决方法)

您可以收听touchstart事件(除了ionFocus事件)，然后在用户实际单击/触摸输入时设置一个标志，并在ionFocus事件实际启动时将标志设置为关闭

像这样：

.HTML

<ion-item>
<ion-label class="labels" floating>Country</ion-label>
<ion-input type="text" (ionFocus)="onCountryFocus()" (touchstart)="onCountryTouch()"></ion-input>
</ion-item>

TS

onCountryTouch() {
this.isTouch = true;
}
onCountryFocus() {
if (!this.isTouch) {
return;
}
// model open
this.isTouch = false;
}

这将防止模式在触发第二个焦点事件时重新打开。

Answer 4

将pointer-events: none;添加到输入的 css 中。

只要输入仅在问题中readonly，它应该可以正常工作。

Answer 5

您可以尝试一种解决方法。删除 (ionFocus) 事件并添加 (单击) 到 ion-item。此外，通过添加禁用标签来禁用您的输入：

<ion-item (click)="onCountryFocus()" >
<ion-label class="labels" floating>Country</ion-label>
<ion-input type="text" formControlName="country" disabled></ion-input>
</ion-item>

如果要将输入样式设置为未禁用，请将类国家/地区输入添加到离子输入和以下 css：

.country-input {
input[disabled] {
opacity: 1;
}
}