我在 Angular 中創建了一個卡片組件：
<div class="my-card" (keyup.enter)="onUploadButtonClick()">
<div class="img-container">
<img src="path-to-image"/>
</div>
<div class="my-card__form">
<form [formGroup]="myFormGroup">
<label>First Input:</label>
<input type="text" formControlName="input1">
...
</form>
</div>
</div>
現在，我想實作以下目標：每當我點擊卡片時，在按下 Enter 鍵時，我想呼叫onUploadButtonClick(). 它已經部分正常作業：當焦點位于我的一個輸入欄位上時，按下 Enter 鍵時，onUploadButtonClick()呼叫該方法。但是，似乎 keyup 事件只能從輸入欄位中觸發。當我之前單擊我的卡時，我也想觸發此事件，但我當前的焦點不在輸入欄位上。有沒有辦法做到這一點？另外：我不想要的是每當我在我的應用程式內的任何地方按 Enter 時觸發這個事件，只有當我之前點擊過卡片時。
uj5u.com熱心網友回復：
我對這個問題不是 100% 清楚，但似乎您希望事件從組件中的非元素keyup觸發input
您需要使這些元素具有焦點以注冊鍵盤事件。嘗試添加tabindex="0"到 div(s)
uj5u.com熱心網友回復：
可以使用@Hostlistener 在您的組件中全域監聽keyup 事件。檢查這個https://angular.io/api/core/HostListener#description
您將需要組件中的一個屬性來保存最后一次單擊的 div，基于您是否可以呼叫onUploadButtonClick ()
uj5u.com熱心網友回復：
聽起來你應該保存用戶之前是否點擊過卡片的資訊：
將該資訊的標志添加到您的控制器中：
public userHasClicked = false;
添加邏輯以在用戶單擊卡片時將 userHasClicked 切換為 true：
<div class="my-card" (keyup.enter)="onUploadButtonClick()" (click)="userHasClicked=true">
...
</div>
在執行代碼之前添加對該標志的檢查onUploadButtonClick()：
前：
onUploadButtonClick() {
// your code
}
后：
onUploadButtonClick() {
if (this.userHasClicked) {
// your code
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/492534.html
標籤：javascript html 有角度的
下一篇：如何使用ENTER作為用戶輸入