如何在Ionic 4中大写句子的第一个单词？

Question

我正在尝试在Ionic 4 INPUT中将句子的第一个单词大写，但是在CSS上进行了许多测试后，ion-text-capitalize无效。...最简单的方法是什么？非常感谢

Answer 1

为ion-textarea编写ionChange事件处理程序

我已经删除了以前的答案，并将其编辑为一些工作代码。

我个人认为这不是一个好的解决方案，因为这类事情最终会出现错误或缓慢。

您可以写一个ion-event。

我写了一个简单的代码片段，用大写字母替换了第一个字母。

（template-test.page.html）

<ion-content>
  <ion-title>Text Area Test</ion-title>
  <ion-item>
    <ion-textarea [(ngModel)]="someAutoFormattedInput" (ionChange)="onAutoFormatChanged()"></ion-textarea>
  </ion-item>
</ion-content>

（template-test.page.ts）

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-textarea-test',
  templateUrl: './textarea-test.page.html',
  styleUrls: ['./textarea-test.page.scss'],
})
export class TextareaTestPage implements OnInit {

  someAutoFormattedInput: string;

  constructor() { }

  ngOnInit() {
  }

  onAutoFormatChanged() {
    this.someAutoFormattedInput = this.setFirstLetterToUppercase(this.someAutoFormattedInput);
  }

  private setFirstLetterToUppercase(string:string):string {
    // https://dzone.com/articles/how-to-capitalize-the-first-letter-of-a-string-in
    return string.charAt(0).toUpperCase() + string.slice(1);
  }

}

为什么我不喜欢这个

正如我所说，这些类型的东西最终会出现马车和懒惰。两者都是，但是我已经介绍了它，因为它可能对您的问题“足够好”。

Buggy -例如，如果您输入新的第一个字母，它将大写，但是第二个插槽中的原始字母将大写。很难假设您应该将其他所有内容都转换为小写，因此编写规则来管理该问题很容易。

我的意思是：

  

越野车

     

Uggy（删除第一个字母，效果很好）

     

巴吉（添加一个新的第一个字母，现在我们输入杂乱）

可能还有其他潜伏的情况。

延迟-这会对整个输入执行字符串操作，这可能会很长，具体取决于您使用的是什么。这有可能变得昂贵而缓慢。

我会做什么

我会让用户输入他们想要的任何内容，然后在保存数据时对数据进行格式化/清理。

或者我会使用自定义管道，仅用于格式化显示的数据，然后将原始用户输入保持不变。

Answer 2

使用 textarea 字段的 autocapitalize 属性，使用 autocapitalize="true"，例如

    <ion-textarea formControlName="description"
              rows="5" autocapitalize="true">

它会自动将每个句子的第一个字母大写。

Answer 3

您可以采用以下不同的方式实施它：

1。通过内联样式：

<p style="text-transform: capitalize;">This will be transformed to capitalize all words, including both parts of this hyphenated word: double-parked.</p>

2。通过CSS类：

.capitalize { text-transform: capitalize; }

<p class="capitalize">This will be transformed to capitalize all words, including both parts of this hyphenated word: double-parked.</p>

希望这会有所帮助！