Angular - 自动完成效果不佳答案

【问题标题】：Angular - Autocomplete is not working wellAngular - 自动完成效果不佳
【发布时间】：2021-09-15 07:19:52
【问题描述】：

我在输入 HTML 时遇到了autofocus 的问题。当页面加载时，我保存的登录信息会显示出来，并且焦点标记会显示在输入的开头，就像之前的图片一样。

但是当我在键盘上键入内容时，字母会插入到输入的末尾，如下所示：

我试图修复它，但没有成功。我想将焦点标记在输入的末尾或开头，但工作正常。

我正在使用角度 11

我的代码：

<input autofocus [(ngModel)]="usuario.name" type="text" name="name" id="name" placeholder="Insira o login">

【问题讨论】：

聚焦时，浏览器会将光标定位在上一个模糊事件之前的位置。如果没有模糊事件，它会将光标定位在最后一个符号之后。检查这个例子codepen.io/urak/pen/zYrVwNb

标签： html angular forms dom-events autofocus

【解决方案1】：

autofocus 属性有问题。发生这种情况是因为您的输入值是在输入聚焦之后出现的。

您应该使用ViewChild 使用focus 函数，并在数据到来后将焦点放在input 上。要实现这一点：

constructor() {}

@ViewChild('myname') input: ElementRef;
...
private someFunction(): void {
  // Data is loaded using service
  this.input.nativeElement.focus(); // now focus
}

【讨论】：

我试过了，但对我不起作用。错误仍然发生。如果我在模型上设置一些值，它可以工作，但是因为该值来自保存密码，所以它不起作用。
@pvfreitas 你在 afterviewinit 生命周期钩子里试过了吗？
是的，兄弟。我也试过 setTimeout() 。如果我喜欢这样：“this.usuario.name = 'pet';”。有用。但是我的用户名来自浏览器。它保存在那里。
看起来模型与视图不同步。我建议您在以编程方式聚焦输入之前，先收听控件上的输入事件并使用模型更新值。显然这样做只是为了浏览器预填充而不是为了用户操作

【解决方案2】：

我解决了这样禁用自动完成的情况：

<input autocomplete="new-password" [(ngModel)]="usuario.password" type="password" name="senha" id="senha" placeholder="Insira a senha">

现在用户需要选择保存的密码。谢谢各位。

【讨论】：