Mat-autocomplete long string, cursor 出现在字符串的末尾，如何让cursor出现在字符串的开头？

Question

我不知道如何在 Whosebug 中为 angular 应用程序运行代码片段，

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

这是例子，在 stackblitz link link to code 中，我只是为加利福尼亚附加了字母 'v'，当我 select 'california' 时，我看到光标在末尾，而不是我希望光标在字符串的开头。

在 app > app.component.ts 下的代码 link 中，检查状态变量，将名称属性更改为 128 个字符的长字符串，然后从下拉菜单 select 选项中，你会看到光标出现在字符串的末尾。

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

Mat-autocomplete long string, cursor 出现在字符串的末尾，如何让cursor出现在字符串的开头？

Mat-autocomplete long string, cursor appears at end of string, how to get cursor at start of string?

typescript

angular

mat-autocomplete