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

Question

我不知道如何在 stackoverflow 中为 Angular 应用程序运行代码 sn-p，

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

这是一个例子， 在 stackblitz 链接link to code 中，我只是为加利福尼亚添加了字母“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)">

DEMO