keydown 相关问题

我在这里分享我的代码，当我第一次按向下箭头键时，它将进入下一行，但再次按向下箭头键时，它将无法正常工作（https://i.stack.imgur.com/4qznx.jpg） **HTML** 我在这里分享我的代码，当我第一次按向下箭头键时，它将进入下一行，但再次按向下箭头键时，它将无法正常工作 () **HTML** <mat-row *matRowDef="let row; columns: displayedColumns; let index = 'index+1';" class="table-row" (click)="getRecordFromTable(row, index)" tabindex="999" (keydown.arrowdown)="arrowUpDownEvent(index,true)" (keydown.arrowup)="arrowUpDownEvent(index,false)" (keydown.enter)="onConfirmButton(row,index)" [ngClass]="{'previous-highlighted': (this._POSFormService.POSHeaderForm.get('walkInCustomerCode')?.value == row.code), 'current- highlighted': (this.customerFormService.selectedCustomerCode.value == row.code && this._POSFormService.POSHeaderForm.get('walkInCustomerCode')?.value !== row.code)}"> </mat-row> **TS** arrowUpDownEvent(index: number,isDownArrow : boolean) { if (isDownArrow){ let nextrow = this.customerFilterDataSource.data[index]; if (nextrow){ this.getRecordFromTable(nextrow, index + 1); } } else{ let nextrow = this.customerFilterDataSource.data[index-2]; if(nextrow){ this.getRecordFromTable(nextrow, index - 2); } } } // Define a variable to keep track of the currently focused row index focusedRowIndex: number = -1; arrowUpDownEvent(index: number, isDownArrow: boolean) { if (isDownArrow) { // Move focus to the next row if available if (index < this.customerFilterDataSource.data.length - 1) { this.focusedRowIndex = index + 1; } } else { // Move focus to the previous row if available if (index > 0) { this.focusedRowIndex = index - 1; } } } // In your HTML template, bind the focusedRowIndex to each row's tabindex and classes <mat-row *matRowDef="let row; columns: displayedColumns; let index = index;" class="table-row" (click)="getRecordFromTable(row, index)" [tabindex]="focusedRowIndex === index ? '999' : null" (keydown.arrowdown)="arrowUpDownEvent(index, true)" (keydown.arrowup)="arrowUpDownEvent(index, false)" (keydown.enter)="onConfirmButton(row, index)" [ngClass]="{ 'previous-highlighted': this._POSFormService.POSHeaderForm.get('walkInCustomerCode')?.value == row.code, 'current-highlighted': this.customerFormService.selectedCustomerCode.value == row.code && this._POSFormService.POSHeaderForm.get('walkInCustomerCode')?.value !== row.code, 'focused-row': focusedRowIndex === index }"> </mat-row> 之前的代码没有“集中”，否则改变类。为了聚焦，我们需要“到达”HTMLElement。为此，您使用模板引用变量和 ViewChildren <tr mat-row #row tabIndex="1" *matRowDef="let row; columns: displayedColumns;let index=index" (keydown.arrowdown)="arrowUpDownEvent(index, 1)" (keydown.arrowup)="arrowUpDownEvent(index, -1)"> </tr> 在.ts中 //declare a QueryList of ElementRef @ViewChildren('row',{read:ElementRef}) rows!:QueryList<ElementRef> //I choose pass to the function 1 or -1 to simply the code arrowUpDownEvent(index:number,incr:number) { index+=incr; if (index>=this.rows.length || index<0) return const row=this.rows.find((_x:ElementRef,i:number)=>i==index) ?.nativeElement.focus() } 我们可以采取另一种方法，即使用 rxjs fromEvent 运算符“监听” document.keydown @ViewChildren('row',{read:ElementRef}) rows!:QueryList<ElementRef> keyUpDown!: Subscription; //<--declare a subscription ngOnInit() { //we are interesting only when arrow up (38) and arrow down (40) this.keyUpDown = fromEvent(document, 'keydown') .pipe(filter((x: any) => x.keyCode == 40 || x.keyCode == 38)) .subscribe((res) => { //get the active element const activeRow = document.activeElement; //look for in all the "rows" if is the active element // or if contains the active element let row = activeRow ? this.rows.find( (x: ElementRef) => x.nativeElement == activeRow || x.nativeElement.contains(activeRow) ) : null; //we do nothing if the row is the last/first and key down/up if ( (res.keyCode == 38 && row == this.rows.first) || (res.keyCode == 40 && row == this.rows.last) ) return; //if not find start at first or at last if (row == null) row = res.keyCode == 38 ? this.rows.last : this.rows.first; else { //is the focus is really in one row if (row.nativeElement == document.activeElement) { const rowIndex = this.rows .toArray() .findIndex((x) => x.nativeElement == activeRow) + (res.keyCode == 38 ? -1 : 1); //find the row to put the focus row = this.rows.find((x: ElementRef, i: number) => i == rowIndex); } } row.nativeElement.focus(); }); } //don't forget unsubscribe ngOnDestroy() { this.keyUpDown && this.keyUpDown.unsubscribe(); }

angular keydown angular-material-table

回答 2 投票 0

如何确定 Angular @HostListener 中按键或 keydown 事件中光标的位置（插入符号位置）

我需要确定光标的位置。这是我的代码： @HostListener('keypress', ['$event'])disableKeys = (e: KeyboardEvent): 任何 => { const 当前值：字符串 = (<

angular typescript keypress keydown

回答 1 投票 0

为什么在vb.net中我必须按两次键盘上的Escape

我正在使用 DropdownStyle Combobox： Dropdown 如果我按键盘上的 Enter 键，则只能按一次，但为什么如果我按键盘上的 Escape 键，则必须执行两次，我使用 String.Equals

vb.net combobox keydown keycode keyup

回答 1 投票 0

keydown触发两次的eventListener回调函数

我的右侧有一个菜单，左侧有相关说明，我想在按向下箭头或向上箭头键时更改菜单中的选定项目。但每次我按下按键都会回调

reactjs next.js addeventlistener keydown js-scrollintoview

回答 1 投票 0

KeyDown 从我的 TextBox 中删除输入，如何停止此操作？

我正在制作一个登录表单，我想在其中按 Enter 键，然后我会在名为 BtnLogin 的登录按钮上得到一个 peroformedClick。 private void txtPassword_KeyDown(对象发送者, KeyEventArgs e) { ...

c# visual-studio winforms textbox keydown

回答 1 投票 0

如何在c# winforms中显示小写字母的KeyCode和KeyData

我正在尝试显示按下的键盘按键上的信息。此代码正确显示大写字母，但按下小写字母时也会显示大写信息。嗬...

c# winforms keypress keydown

回答 2 投票 0

使用2个键码返回事件

我已经学习 JS 3 周了，目前正在开发一个项目来构建一架可弹奏的钢琴。当输入字母c时，它会播放音符c。该部分工作正常，但现在我希望用户按住

javascript addeventlistener keydown

回答 1 投票 0

如何检测和映射同时按下的多个按键

我正在使用 keydown 和 keyup 事件来检测按键操作。但是当我按下 2 个或 3 个或更多键并按住它们时，大多数时候它不会识别之后按下的任何键，直到我停止

javascript keydown

回答 1 投票 0

Tab 键未在手机中注册为 keydown

我正在创建一个具有多个输入字段的表单，我试图在输入焦点时按 Enter 或 Tab 键来调用函数。我正在使用以下代码： name_input.addEventListen...

javascript android mobile dom-events keydown

回答 2 投票 0

如何阻止我的 activeElement.value 修改修改 activeElement 和后续元素？

我正在创建一组输入框，每个输入框接受 1 个字符。每当我按下一个字符时，我希望将 document.activeElement.value 设置为 event.key 的值，然后我想...

javascript keydown

回答 1 投票 0

如何在ExtJS面板上监听keydown事件

我想监听面板上的 keydown 事件，并相应地在面板内的 SVG 上执行相应的操作。但我不知道如何监听 ExtJS 面板上的 keydown 事件？有什么帮助吗？预先感谢。

javascript events extjs panel keydown

回答 2 投票 0

如何避免按住按键时按键自动重复？

我目前正在编写一个程序，使用 Debian 上的 python 3 中的“键盘”库。所以如果我按住一个键。键盘库在 KeyPress 处获取多个 KeyDownEvents 而不是一个，但我只......

python keyboard keydown keyup autorepeat

回答 2 投票 0

vuetify v-text-field 上的 keyup.enter 问题

我有一个来自 vuetify 表单的 v-text-field，它调用一个方法，但是当我使用 @keydown.enter 事件时，它不起作用。使用其他键，例如 @keydown.esc，以及按钮我有一个来自 v-text-field 表单的 vuetify，它调用一个方法，但是当我使用 @keydown.enter 事件时，它不起作用。使用其他键，例如 @keydown.esc，以及按钮 <v-btn @click="submit"> 都可以。 vuetify 版本是[email protected]。下面的例子说明了这个问题： <form> <v-text-field v-model="sepalLength" required @keydown.enter="submit" # HERE IS THE PROBLEM!!! ></v-text-field> <v-btn @click="submit">Search</v-btn> # HERE IT WORKS </form> <p style="white-space: pre-line;" v-if="predictedClass">{{ predictedClass }}</p> <script> data: () => ({ predictedClass : '' }), methods: { submit () { axios.post('http://127.0.0.1:5000/predict', { sepal_length: this.sepalLength }) .then((response) => { this.predictedClass = response.data.class }) </script> 尝试一下这个 <form> <v-text-field v-model="sepalLength" required @keydown.enter="submit" # HERE IS THE PROBLEM!!! ></v-text-field> <v-btn @click="submit">Search</v-btn> # HERE IT WORKS </form> <p style="white-space: pre-line;" v-if="predictedClass">{{ predictedClass }}</p> <script> data: () => ({ predictedClass : '' }), methods: { submit (event) { //<---- add event param event.preventDefault() //<---------------HERE axios.post('http://127.0.0.1:5000/predict', { sepal_length: this.sepalLength }) .then((response) => { this.predictedClass = response.data.class }) </script> 或简写 <form> <v-text-field v-model="sepalLength" required @keydown.enter.prevent="submit" <----------prevent here ></v-text-field> <v-btn @click="submit">Search</v-btn> # HERE IT WORKS </form> <p style="white-space: pre-line;" v-if="predictedClass">{{ predictedClass }}</p> <script> data: () => ({ predictedClass : '' }), methods: { submit () { axios.post('http://127.0.0.1:5000/predict', { sepal_length: this.sepalLength }) .then((response) => { this.predictedClass = response.data.class }) </script> 默认情况下，当您在任何字段具有焦点时按 Enter 键时，HTML 表单将调用 @submit 绑定。注意：.prevent修饰符将阻止页面重新加载；这样你就可以运行一些代码了。 type="sumbit" 的 HTML 按钮将调用表单 @submit-绑定。因此更好的方法是： <template>  <form @submit.prevent="submit"> ...  <button type="submit"> Submit </button> </form> </template> <script> methods: { submit() { // so stuff } } </script>

forms vue.js vuetify.js keydown

回答 2 投票 0

keydown 相关问题

最新问题