Как сделать заглавным первое слово предложения в Ionic 4? - PullRequest
0 голосов
/ 19 июня 2019

Я пытаюсь использовать первое слово предложения в Ionic 4 INPUT, но после многих тестов по CSS, ion-text-capitalize ... ничего не получается ... Какой самый простой способ сделать это? Большое вам спасибо

Ответы [ 2 ]

1 голос
/ 21 июня 2019

Написание обработчика событий ionChange для ion-textarea

Я удалил свой предыдущий ответ и отредактировал его до некоторого рабочего кода.

Лично я не думаю, что это хорошее решение, потому что такие вещи заканчиваются ошибками или медлительностью.

Существует ионное событие , против которого вы можете писать.

Я написал простой фрагмент, который заменяет первую букву заглавной буквой.

(шаблон-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>

(шаблон-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

Угги (удалить первую букву, хорошо работает)

BUggy (добавьте новую первую букву, теперь у нас грязный ввод)

Возможно, скрываются другие крайние случаи.

Laggy - Это выполняет строковые операции над всем вводом, которые могут быть очень длинными, в зависимости от того, с чем вы работаете. Это может быть дорогим и медленным.

Что бы я сделал

Я бы позволил пользователю вводить все, что он хочет, а затем, когда данные будут сохранены, я выполню это форматирование / очистку данных.

Или я бы использовал пользовательский канал только для того, чтобы отформатировать данные в том виде, в котором они отображаются, а затем сохранить исходный пользовательский ввод без изменений.

0 голосов
/ 19 июня 2019

Вы можете реализовать это по-другому, как показано ниже:

1. Через InLine Style:

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

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...