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

Question

我试图将 Ionic 4 INPUT 中句子的第一个单词大写，但在对 CSS、ion-text-capitalize 进行多次测试后不起作用......最简单的方法是什么？非常感谢你

Answer 1

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

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

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

有一个 ion-event 您可以对其进行写入。

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

（模板测试.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>

（模板测试.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（删除第一个字母，效果很好）

BUggy（添加新的第一个字母，现在我们的输入很混乱）

可能还潜伏着其他边缘情况。

Laggy-这对整个输入进行字符串操作，这可能会很长，具体取决于您正在使用的内容。这可能既昂贵又缓慢。

我会做什么

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

或者我会使用自定义管道来格式化显示的数据，然后存储未更改的原始用户输入。

Answer 2

您可以通过以下不同的方式实现它：

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>

希望这会有所帮助！

Answer 3

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

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

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

Answer 4

就像 @waleed-shahzaib 提到的，ion-textarea 和 ion-input 中有一个自动大写属性。

该属性不再是布尔值。它可以采用几个值： “关”、“无”、“开”、“句子”、“单词”、“字符”

<ion-textarea autocapitalize="sentences"></ion-textarea>

查看官方文档： https://ionicframework.com/docs/api/textarea#properties

小提示： 它似乎不适用于网络，只能在设备上使用。