angular - Mat-autocomplete长字符串，光标出现在字符串的末尾，如何在字符串的开头获取光标？

Question

我不知道如何在stackoverflow中运行角度应用程序的代码片段，

我正在使用 mat-autocomplete ，我选择了 128 个字符长的名称，光标附加在所选字符串的末尾而不是开头。有没有人在使用 mat-autocomplete 时观察到这一点？

这是示例，在指向代码的 stackblitz 链接链接中，我只是为加利福尼亚添加了字母“v”，当我选择“加利福尼亚”时，我看到光标位于末尾，而我希望光标位于字符串的开头。

在 app > app.component.ts 下的代码链接中，检查状态变量，将 name 属性更改为 128 字符长的字符串，然后从下拉选择选项中，您将看到光标出现在字符串末尾。

Answer 1

使用input并且textarea不需要创建自定义Range，因为它们提供了自己的 API，在我们的例子setSelectionRange()中就是我们需要的。但是在使用它之后，输入的内容仍然是隐藏的，但看起来像blur()并且focus()可以解决问题。

optionSelected(input: HTMLInputElement) {
  input.blur();
  input.setSelectionRange(0, 0);
  input.focus();
}

<input ... #input>
<mat-autocomplete ... (optionSelected)="optionSelected(input)">

演示