如何解决按Enter时的Angular Custom Directive Set选项卡索引
我想在keydown上触发Tab键事件。以完整的形式输入。对于以下代码,我正在父Div上运行这些函数。在控制台中检测到该事件,但是输入没有发生任何变化(这意味着焦点不会随着Tab键的移动而从输入中移开)。
模板:
<Div #parentnode (keydown)="KeyEventEmitter($event,parentnode)>
TS文件:
KeyEventEmitter(event:KeyboardEvent,el) {
//event.preventDefault;
let keyEvent = new KeyboardEvent("keyDown",{key : "Tab",bubbles: true,code: "Tab",location: 0,composed: true,cancelable: true,ctrlKey: false,altKey: false,detail: 0,shiftKey: false
});
console.log('I am custom keyevent',keyEvent)
el.dispatchEvent(keyEvent);
}
}
将感谢您的帮助。谢谢
解决方法
您可以创建一个tabIndex
伪指令,并在该伪指令内设置Enter键下一个索引元素的焦点。
tab.directive.ts
import { Directive,Input,ElementRef,HostListener,OnInit } from'@angular/core';
import { TabService } from './tab.service';
import { BehaviorSubject } from 'rxjs';
@Directive({
selector: '[tabIndex]'
})
export class TabDirective implements OnInit {
private _index: number;
get index() {
return this._index;
}
@Input('tabIndex')
set index(i: any) {
this._index = parseInt(i);
}
@HostListener('keydown',['$event'])
onInput(e: any) {
if (e.which === 13) {
e.preventDefault();
console.log('index',this.index+1)
this.tabService.selectedInput.next(this.index + 1);
}
}
constructor(private el: ElementRef,private tabService: TabService) {}
ngOnInit(){
this.tabService.selectedInput.subscribe((i) => {
if (i === this.index) {
this.el.nativeElement.focus()
}
});
}
}
创建一个标签服务,在每次按下键时使用BehaviourSubject触发下一个索引。
tab.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({providedIn: 'root'})
export class TabService {
selectedInput: BehaviorSubject<number> = new BehaviorSubject<number>(1);
}
现在,模板中的tabIndex
依次分配给每个元素。
<input type="text" tabIndex="1">
<input type="text" tabIndex="2">
<input type="text" tabIndex="3">
<a href="https://google.com" tabIndex="4">Google</a>
您可以在stackblitz上找到完整的工作示例DEMO
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。