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

Question

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

Answer 1

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

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 class:

.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 2

正在为 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 - 例如，如果您输入一个新的第一个字母，它将大写，但第二个插槽中的原始字母将大写。假设您应该将其他所有内容都小写并不容易，因此编写规则来管理它是......错误。

我的意思是：

Buggy

Uggy (delete the first letter, works good)

BUggy (add a new first letter, now we have a messy input)

可能还有其他 edge-cases 潜伏着。

Laggy- 这会在整个输入上执行字符串操作，这可能会很长，具体取决于您使用的是什么。这可能既昂贵又缓慢。

我会做什么

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

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

Answer 3

使用文本区域字段的自动大写属性，使用autocapitalize="true"，例如

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

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

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

How to capitalize the first word of a sentence in Ionic 4?

text

ionic4

正在为 ion-textarea

为什么我不喜欢这个

我会做什么