关于angular：只有当鼠标在AngularJS中使用指令单击一侧时，如何自动调整输入字段中的第一个字符？


How to autocapitalize the first character in an input field only when the mouse click out side using directives in AngularJS?

当输入文本时，它将是小写的，但是当鼠标聚焦出来时，第一个字母必须变为大写。

相关讨论

我假设你没有使用反应式。不需要单独的指令，因为您只需要处理focus out事件。基本上，您可以将focusout事件绑定到您的输入。聚焦后，将发射trigger()方法。

在component.html上，

1
<input class="form-control" (focusout)="trigger($event)" [(ngModel)]="sampleInput" type="text">

在component.ts上，trigger()方法将第一个字母转换为大写。然后，我们将转换后的字符串分配给您的模型(sampleInput)

1
2
3
4
5
6
7
8
sampleInput: string = undefined;
.
.
trigger(event) {
  const inputValue = event.target.value;
  const result = inputValue.charAt(0).toUpperCase() + inputValue.slice(1);
  this.sampleInput = result;
}

号

然而，在一个不那么相关的注释中，我个人最喜欢的是通过纯CSS处理它。但是，当然，这个解决方案也有局限性，因为它将字符串中每个单词的第一个字母大写(例如"hi john"->"hi john")，而不仅仅是整个字符串的第一个字母。此方法的一个明显优点是不会改变该字符串的基础值，因为只影响"display"。

1
2
3
input {
  text-transform: capitalize;
}