Angular 2+ - Ограничить значение текстовой области в столбцах и строках

Question

В настоящее время я сталкиваюсь со следующей проблемой.У меня есть textarea, и я хочу не только ограничить размер textarea атрибутами по умолчанию rows и cols, но я также хочу запретить пользователю вводить больше символов, чем определено в этих атрибутах.У меня есть несколько работающее решение, но я не слишком доволен им.Может быть, у вас есть несколько советов, как улучшить решение

HTML

<textarea rows="2" cols="10" (keyup)="limitTextArea($event)"></textarea>

JS

limitTextArea(evt: KeyboardEvent) {

    let textarea = evt.target as any
    let maxRows: number = textarea.rows;
    let maxColumns: number = textarea.cols;

    let newContent: string = (textarea.value as string)
        .split('\n')
        .filter((val, row) => row < maxRows)
        .map(val => val.slice(0, maxColumns))
        .join('\n');

    textarea.value = newContent;
}

Теперь естьЕсть несколько проблем с этим решением.

1. Оно вызывается keyup -Event.Таким образом, пользователь всегда будет видеть набранный им символ, прежде чем он снова исчезнет.
2. Я как-то возился с целым двухсторонним принципом привязки данных, установив textarea.value
3. , который я используюany как Тип для textarea, который мне действительно не нравится.Если я использую TypeScript, я хочу использовать Types.

Есть идеи, как решить эту проблему?

Answer 1

Логически, если вам нужно 2 строки по 10 столбцов в каждой, подразумевается, что вам нужно всего 20 символов.Таким образом, вы можете просто установить maxlength="20".Вы всегда можете изменить значения соответственно ...

Вам не нужно использовать событие keyup в этом сценарии.Просто используйте атрибут maxlength, и он ограничит максимальное количество символов, которое можно получить от пользователя, и не допустит большего, чем это для вас.

См. Его описание ниже -

/* disable textarea resizing */
textarea {
  resize: none;
}

<script src="https://unpkg.com/@angular/platform-browser-dynamic@7.0.1/bundles/platform-browser-dynamic.umd.js"></script>
<textarea rows="2" cols="10" maxlength="20"></textarea>