Ограничить строки в текстовой области HTML5 - PullRequest
Новая
       15

Ограничить строки в текстовой области HTML5

0 голосов
/ 04 января 2019

Я ищу решение проблемы, но не могу его найти.Это может быть в AngularJS или в Javascript (тогда я переведу это в AngularJS).Проблема в том, что я должен ограничить ряды простой текстовой области.Атрибут 'row = x' в HTML5 ограничивает только представление.Я должен ограничить линии.Проблема в том, что даже если графически линии спускаются, компоненты смотрят на это как на уникальную линию.Пользователь должен нажать ENTER, чтобы создать новую строку.Но я должен ограничить линии.Я сделал эту директиву: 

angular.module('app').directive('maxlines', function (): any {
return function (scope: any, element: any, attrs: any) {
    element.bind("keydown keypress", function (event: any) {

        if (event.which === 13) {
            var text = element.val(),
                numberOfLines = (text.match(/\n/g) || []).length + 1,
                maxRows = parseInt(element.attr('rows'));

            if (event.which === 13 && numberOfLines === maxRows) {
                return false;
            }
        }
    });
};
});

Это работает, если я нажимаю ENTER, но не работает, если я продолжаю писать без нажатия Enter.

1 Ответ

0 голосов
/ 04 января 2019

I думаю вы можете сделать это с чистым HTML.

<textarea cols="20" rows="5" wrap="hard" maxlength="100">

wrap="hard" означает, что, как только пользователь достиг конца строки- в этом случае 20 символов - будет вставлен символ новой строки.

Как только пользователь наберет 100 символов - то же самое, что заполнение 5 строк по 20 символов - ввод больше не будет разрешен.

Теперь, это не мешает кому-то добавлять 10 строк по 10 символов - но приближается ли это к тому, что вы хотите сделать?

...