Angular 4中如何将文本框输入内容实时转为大写

嗨，我来帮你搞定Angular 4里输入框实时转大写的需求！这里有两种实用的方法，根据你的场景选就行：

方法一：利用ngModelChange事件快速实现 #

这种方法超级简单，适合只有单个输入框需要转大写的场景——直接在模板里绑定ngModelChange事件，每次输入变化时就把内容转成大写：

修改你的input标签：

<input 
  type="text" 
  class="form-control" 
  name="myText" 
  [(ngModel)]="defaultText" 
  required 
  pattern="[A-Z]{3}"
  (ngModelChange)="defaultText = $event.toUpperCase()"
/>

简单说下原理：ngModelChange会在ngModel绑定的值发生变化时触发，我们把事件传入的$event（也就是用户当前输入的内容）转成大写后重新赋值给defaultText，这样输入框的显示内容和绑定的变量值会同步变成大写，完美匹配你的需求。

不过要注意，这个方法会直接修改绑定的变量值，如果你的业务逻辑需要保留原始小写输入，可能要做些调整，但绝大多数场景下这个方案足够用。

方法二：自定义指令（推荐，复用性拉满） #

如果你的项目里不止一个输入框需要转大写功能，那自定义一个指令就太香了——一次编写到处复用，代码也更整洁。

1. 创建大写转换指令 #

在项目里新建一个uppercase-input.directive.ts文件，代码如下：

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appUppercaseInput]'
})
export class UppercaseInputDirective {
  constructor(private ngControl: NgControl) {}

  @HostListener('input', ['$event']) onInput(event: any) {
    // 获取输入框当前值并转大写
    const value = event.target.value.toUpperCase();
    // 记录光标位置，避免转大写后光标跳到末尾
    const start = event.target.selectionStart;
    const end = event.target.selectionEnd;
    
    // 更新ngModel绑定的值
    this.ngControl.control?.setValue(value);
    // 恢复光标位置，提升用户体验
    setTimeout(() => {
      event.target.setSelectionRange(start, end);
    });
  }
}

这里额外做了光标位置的处理，避免用户输入过程中光标突然跳到输入框末尾，体验会更流畅。

2. 在模块中声明指令 #

打开你的功能模块（比如AppModule或者对应的子模块），导入并声明这个指令：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { UppercaseInputDirective } from './uppercase-input.directive';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    UppercaseInputDirective // 注册自定义指令
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在模板中使用指令 #

现在只需要给你的input标签加上指令属性就行，其他原有属性完全不用改：

<input 
  type="text" 
  class="form-control" 
  name="myText" 
  [(ngModel)]="defaultText" 
  required 
  pattern="[A-Z]{3}"
  appUppercaseInput
/>

以后任何需要转大写的输入框，只要加上appUppercaseInput属性就能生效，复用性拉满！

额外提示 #

你原来的输入框设置了pattern="[A-Z]{3}"的验证规则，转大写后输入的内容会自动符合这个规则，完全不用额外调整验证逻辑，刚好匹配你的需求~

内容的提问来源于stack exchange，提问作者Raj