通过按Tab键将焦点放在输入内容上时如何取消选择输入内容？

2024-05-18 • 问答

以html格式，当您使用Tab键进行下一个输入时，默认情况下会选择所有内容，如何取消选择？

只需在焦点事件上将target.selectionEnd设置为0

<input (focus)="unselectOnFocus($event)">

unselectOnFocus(event: Event): void {
  event.target.selectionEnd = 0;
}

设置#myInput并绑定焦点事件 <input #myInput (focus)="onFocus()">

@ViewChild('myInput') myInput: ElementRef<HTMLInputElement>;

和

onFocus() {
    setTimeout(() => {
      this.myInput.nativeElement.setSelectionRange(0,0);
    },0)
}

超时是必需的，因为当您使用Tab键选择输入时，将在焦点事件之后立即自动选择文本。

要将元素设置为不可选择，可以在输入元素中使用tabindex = -1属性，如下所示-

<input tabindex='-1'>

负值（通常为tabindex =“-1”）表示无法通过顺序键盘导航访问该元素，但可以使用Javascript或通过单击鼠标在视觉上对其进行聚焦。

您可以在此处查看更多相关信息-tabindex MDN guide

希望这会对您有所帮助。