html - 如何检查按钮是否有焦点?

标签 html angular typescript button

我有一个表单,我想使用 ENTER 键跨字段切换,但我也想在使用 ENTER 键时提交表单当我突出显示(通过 Tab 键/输入)发送 按钮时。

有什么方法可以判断输入按钮是否已获得焦点?

我在想这样的事情:

<form (keydown.enter)="isSendFocussed($event)">
    <input #input1> <!-- input 1 -->
    <input #input2> <!-- input 2 -->
    <input #input3> <!-- input 3 -->
    <button #myButton (click)="sendForm()">Send</button>
</form>

然后我会为 isSendFocussed(event) 函数做一些事情,例如:

@ViewChild('myButton') btn: ElementRef<HTMLInputElement>

isSendFocussed(event) {
    // if (!button is focussed) {
    //     block default functionality and tab across
    // } else {
    //     send form
    // }
}

最佳答案

您可以像这样使用焦点和模糊事件:

<button
   (click)="onFavPopupClose()"
   (focus)="isBtnPopCloseFocused = true" 
   (blur)="isBtnPopCloseFocused = false">
</button>

关于html - 如何检查按钮是否有焦点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54366673/

相关文章:

typescript - 为什么 typescript 不检查选项参数?

angular - 在运行时显示类调用时如何处理

angular - 通过抓取 ElementRef : angular2 禁用按钮

html - 大写还是小写的文档类型?

javascript - 带有 javascript 的样式输入类型文件

angular - 图表适用于 Chrome 但不适用于 Firefox

reactjs - 绑定(bind)元素 'Component' 隐式具有 'any' type.ts

reactjs - 为 `match` 连接 React Router 和 TypeScript

javascript - 单击较低的 z-index 元素

javascript - 如何找出哪个标签包含 'active'类