如何在通过按 Tab 键关注输入内容时取消选择输入内容？

Question

以html形式，使用tab键继续next时默认输入select所有内容，如何取消select它？

Answer 1

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

<input tabindex='-1'>

A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with Javascript or visually by clicking with the mouse.

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

希望对您有所帮助。

Answer 2

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

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

和

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

超时是必需的，因为当您 select 使用 Tab 键输入时，文本会在焦点事件后立即自动 select 编辑。

Answer 3

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

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

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

如何在通过按 Tab 键关注输入内容时取消选择输入内容？

How to unselect input content when focus on it by pushing tab key?

html

input

unselect

typescript

angular