Ionic 4中如何实现输入框句子首字母大写？

我明白你在Ionic 4的input组件上折腾首字母大写功能的烦恼了——CSS和内置的ion-text-capitalize都不管用确实挺闹心的。给你两种最直接简单的实现方式，亲测有效：

方法一：直接监听Input事件（适合单个input快速实现） #

这种方法不需要额外创建文件，直接在组件里写逻辑就行：

模板代码 #

<ion-input [(ngModel)]="inputContent" (input)="handleCapitalize()"></ion-input>

组件类代码 #

inputContent: string = '';

handleCapitalize() {
  const value = this.inputContent;
  if (!value) return;

  // 处理单个单词首字母大写
  if (value.length === 1) {
    this.inputContent = value.charAt(0).toUpperCase() + value.slice(1);
  } 
  // 处理空格后的新单词首字母大写
  else if (value.charAt(value.length - 2) === ' ') {
    const lastChar = value.charAt(value.length - 1).toUpperCase();
    this.inputContent = value.slice(0, -1) + lastChar;
  }
}

这个逻辑会实时监听输入，当输入第一个字符或者空格后的第一个字符时自动转成大写，完全满足句子首字母大写的需求。

方法二：自定义Angular指令（适合多个input复用） #

如果你的项目里有多个input需要这个功能，写个可复用的指令更省心：

创建指令文件（比如capitalize-input.directive.ts） #

import { Directive, HostListener } from '@angular/core';
import { IonInput } from '@ionic/angular';

@Directive({
  selector: '[appCapitalizeInput]'
})
export class CapitalizeInputDirective {

  constructor(private ionInput: IonInput) { }

  @HostListener('input', ['$event']) onInput(event: Event) {
    const target = event.target as HTMLInputElement;
    let value = target.value;
    if (!value) return;

    // 分割所有单词，每个单词首字母大写，其余保持原样
    value = value.split(' ').map(word => {
      return word ? word.charAt(0).toUpperCase() + word.slice(1) : word;
    }).join(' ');

    // 更新input值并保持光标位置正确
    this.ionInput.value = value;
    const start = target.selectionStart;
    const end = target.selectionEnd;
    setTimeout(() => target.setSelectionRange(start, end), 0);
  }
}

在模板中使用指令 #

<ion-input appCapitalizeInput [(ngModel)]="inputContent"></ion-input>

只需要给需要首字母大写的input加上appCapitalizeInput属性，就能自动生效，还解决了光标偏移的问题，体验更流畅。

补充说明：为什么CSS和ion-text-capitalize没用？ #

• ion-text-capitalize是用于显示文本的样式，不会改变实际输入的value值；
• CSS的text-transform: capitalize只是视觉上的效果，实际提交的input值还是小写的，根本解决不了业务需求。

内容的提问来源于stack exchange，提问作者M. Mariscal