通过按 Tab 键聚焦输入内容时如何取消选择输入内容?

Question

在 html 表单中， 当您使用选项卡进行下一个输入时，默认情况下它会选择所有内容， 如何取消选择它？

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 或通过单击鼠标直观地聚焦该元素。

你可以在这里查看更多关于这个 - 标签索引MDN指南

希望这对您有所帮助。