javascript - 在离子按钮上触发模糊事件

问题描述

我正在尝试根据某些条件从离子按钮中移除焦点。选择按钮后，我使用 CSS 更改按钮的颜色，并且我希望有条件地删除此“活动”状态。

ion-button.ion-color-primary:active {
    --ion-color-base: #fff !important;
    --ion-color-contrast: var(--ion-color-primary) !important;
    border: 1px solid var(--ion-color-primary);
}

简而言之，我追求的功能类似于：

如果用户选择了一个答案并且答案不正确，那么它应该不再具有焦点。

我已经尝试了以下代码，基于另一篇文章，该文章显示了如何使用输入字段管理焦点，但它似乎不起作用并生成“不是函数”错误：

HTML

 <ion-button (click)="checkTrue()" color="primary"id="next" #next>Next</ion-button>

打字稿

@ViewChild('next') nextBtn: any;

checkTrue(){
   if(conition === true){
      this.nextBtn.blur();
   }
}

我还在文档中注意到按钮上有一个名为“ionBlur”的事件，因此您可以在按钮上的模糊事件上设置运动。但是，我没有找到触发模糊事件的方法。

最后，我遇到了这篇做类似事情的帖子。我尝试应用它没有任何运气。在添加任何建议的代码之前，我注意到“活动”类被短暂添加到按钮中。然而，它实际上很快就会被删除，但按钮的样式仍然显示为具有焦点。

有人对如何从离子按钮中删除“活动”状态有任何建议吗？任何建议将不胜感激！

标签： javascriptionic-frameworkionic4

你可以做这样的事情，

<ion-button (click)="checkTrue()" [ngClass]="{'conition' : active}" color="primary"id="next" #next>Next</ion-button>

您只需要在 HTML 文件和 ts 中的 checkTrue 函数中执行此操作，您只需检查 connition 变量的值并将其设置为 true 或 false。

javascript - 在离子按钮上触发模糊事件

问题描述

解决方案

推荐阅读