Text 在《爱奥尼亚4》中,如何将句子的第一个单词大写?

Text 在《爱奥尼亚4》中,如何将句子的第一个单词大写?,text,ionic4,Text,Ionic4,我正在尝试在Ionic 4输入中大写一个句子的第一个单词,但在对CSS、Ionic文本大写进行了多次测试后,结果都不起作用。。。。最简单的方法是什么?非常感谢您您可以用以下不同的方式实现它: 1。通过内联样式: 这将被转换为将所有单词大写,包括此连字符单词的两个部分:双驻车。您可以用以下不同的方式实现它: 1。通过内联样式: 这将被转换为大写所有单词,包括此连字符单词的两部分:双驻车。为ion textarea编写ionChange事件处理程序 我已经删除了我以前的答案,并将其编辑为一些工作

我正在尝试在Ionic 4输入中大写一个句子的第一个单词,但在对CSS、Ionic文本大写进行了多次测试后,结果都不起作用。。。。最简单的方法是什么?非常感谢您

您可以用以下不同的方式实现它:

1。通过内联样式:


这将被转换为将所有单词大写,包括此连字符单词的两个部分:双驻车。

您可以用以下不同的方式实现它:

1。通过内联样式:

这将被转换为大写所有单词,包括此连字符单词的两部分:双驻车。

为ion textarea编写ionChange事件处理程序 我已经删除了我以前的答案,并将其编辑为一些工作代码

我个人认为这不是一个好的解决方案,因为这些类型的事情最终会出现问题或进展缓慢

有一个你可以反对的理由

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

(template test.page.html)

为什么我不喜欢这个 正如我所说的,这些类型的东西最终会变得越来越落后。这两者兼而有之,但我提出了它,因为它可能“足够好”解决您的问题

Buggy-例如,如果您放入新的第一个字母,它将大写,但插槽2中的原始字母将大写。很难假设您应该将所有其他内容都小写,所以编写规则来管理它是。。。马车

我的意思是:

马车

Uggy(删除第一个字母,效果良好)

BUggy(添加新的第一个字母,现在我们有一个混乱的输入)

可能还有其他潜在的边缘案例

Laggy-这会对整个输入执行字符串操作,可能会很长,这取决于您使用的是什么。这有可能是昂贵和缓慢的

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

或者,我可以使用自定义管道将数据格式化为显示的数据,然后存储原始用户输入,不做任何更改。

为ion textarea编写ionChange事件处理程序 我已经删除了我以前的答案,并将其编辑为一些工作代码

我个人认为这不是一个好的解决方案,因为这些类型的事情最终会出现问题或进展缓慢

有一个你可以反对的理由

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

(template test.page.html)

为什么我不喜欢这个 正如我所说的,这些类型的东西最终会变得越来越落后。这两者兼而有之,但我提出了它,因为它可能“足够好”解决您的问题

Buggy-例如,如果您放入新的第一个字母,它将大写,但插槽2中的原始字母将大写。很难假设您应该将所有其他内容都小写,所以编写规则来管理它是。。。马车

我的意思是:

马车

Uggy(删除第一个字母,效果良好)

BUggy(添加新的第一个字母,现在我们有一个混乱的输入)

可能还有其他潜在的边缘案例

Laggy-这会对整个输入执行字符串操作,可能会很长,这取决于您使用的是什么。这有可能是昂贵和缓慢的

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


或者,我可以使用自定义管道将数据格式化为显示的数据,然后存储原始用户输入,不做任何更改。

发布您的代码?它应该会起作用。当你检查元素时,你看到了什么?它将所有单词大写,我只需要第一个…发布你的代码?它应该会起作用。当你检查这个元素时,你看到了什么?它把所有的单词都大写,只是我需要第一个…我的意思是一个文本的第一个单词我的意思是一个文本的第一个单词对不起,伙计,我应该在相应的输入标签的类上放什么?因为我把它放进去了,但它不起作用,扩展了我的答案,我没想到它需要多少工作。。。谢谢你们的时间和回复,所以很有意思对不起,伙计,我应该在每个输入标签的类上放什么?因为我把它放进去了,但它不起作用,扩展了我的答案,我没想到它需要多少工作。。。谢谢您的时间和回复,非常有趣
<ion-content>
  <ion-title>Text Area Test</ion-title>
  <ion-item>
    <ion-textarea [(ngModel)]="someAutoFormattedInput" (ionChange)="onAutoFormatChanged()"></ion-textarea>
  </ion-item>
</ion-content>
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);
  }

}