javascript 在angular4中触发键盘事件(回车键)

tpxzln5u  于 2023-05-21  发布在  Java
关注(0)|答案(4)|浏览(219)

在我的应用程序中,我有一个全局搜索字段,用于过滤列表中的数据,列表将有多个列。从其他组件设置过滤器值(设置为输入值),它正在发生,但我必须触发输入上的手动键盘事件(回车键)操作。
我尝试了viewChild装饰器。
component.html

<input #gb type="text" placeholder="Global search.." class="changeListComponent_inputSearch"  [(ngModel)]="jiraRef" />

component.ts

@ViewChild('gb') gb:ElementRef;         
this.jiraRef =  jiraRef;
const event = new KeyboardEvent("keypress",{ "which ": "13"});
this.gb.nativeElement.focus();
this.gb.nativeElement.dispatchEvent(event);

使用这个,我可以设置值,并使一个焦点,但键盘事件不触发。

fcy6dtqo

fcy6dtqo1#

使用原生js代码触发了按键事件。
将id属性与元素引用沿着放置到input元素中。
从组件内部创建新函数。

triggerEvent(el, type) {
    if ('createEvent' in document) {
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
    } else {
        var e = document.createEventObject();
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

var el=document.getElementById('gb-search');
this.triggerEvent(el,'keyup');
kqlmhetl

kqlmhetl2#

我不知道你为什么把事情搞复杂了。为什么不直接在输入字段中添加一个按键事件,然后通过viewChild触发该事件呢?

<input id="text1" type=text (keyup)="enterPressed()">

然后还可以通过view child访问相同的方法:

this.viewChild.enterPressed();
pcrecxhr

pcrecxhr3#

一般来说,您的输入可以是:

<input (keydown.enter)="doEnter()">

从其他组件简单地调用函数doEnter。怎么做?
如果搜索组件在父组件中,那么就很容易了,因为可以使用ViewChild

<search-component></search-component>
 @ViewChild(SearchComponent) searchComponent
 ..whe we need..
 this.searchComponent.doEnter()

否则,通常使用Subject来订阅。你有一个服务

@Injectable({
  providedIn: 'root',
})
export class KeyBoardService {
  keyboard:Subject<any>=new Subject<any>()
  constructor() { }

}

在组件Search中,在构造函数和ngOnInit中注入服务

constructor(private keyboardService:KeyBoardService){}
ngOnInit(){
    this.keyboardService.keyboard.subscribe(_=>{
         this.doEnter()
    })
}

而在另一个组件中

constructor(private keyboardService:KeyBoardService){}
..in anywhere..
this.keyboardService.next(null);

存在另一个选项,即当两个组件在屏幕上的时间-并在相同的<router-outlet></router-outlet>是使用模板引用变量和输入。所以我们有

<search-component #search></search-component>
<other-component [search]=search><other-component>

在其它部件中

@Input('search') searchComponent
..in anywhere
this.searchComponent.doEnter
esyap4oy

esyap4oy4#

您可以简单地使用

<input type=text (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
}

解决方案基于此答案Get which key pressed from (keypress) angular2

相关问题