html - 如何通过按 Tab 键取消选择输入内容？

Question

在html表单中，当您使用tab继续下一个输入时，默认选择所有内容，如何取消选择它？

Answer 1

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

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

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

Answer 2

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

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

和

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

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

Answer 3

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

<input tabindex='-1'>

负值（通常是 tabindex="-1"）表示该元素无法通过顺序键盘导航访问，但可以通过 Javascript 或通过鼠标单击在视觉上获得焦点。

您可以在此处查看有关此的更多信息- tabindex MDN 指南

希望这会帮助你。