Связаться с нами

K2 Five 19 октября 2020

Способ реализации изменения размера текстовой области в процессе внесения данных пользователем

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

Изменение размера текстовой области будет происходить с помощью JQuery скрипта. Для реализации нам достаточно на View cоздать DataLabel, например с именем «dlResizeJS», выбрать опцию Literal.

В Expression создаем два выражения:

  1. Первая переменная, например с именем «exp Resize TextArea» и записываем в нее наш скрипт, который отвечает за изменение размеров всех TextArea на форме:

  1. Вторую переменную создаем, например с именем «exp Dynamic TextAreaSize» и также записываем в нее наш скрипт. Эта переменная отвечает за изменение размера TextArea в соответствии с введенными данными пользователя в него:

Поля Expression оставляем пустыми

Дальше создадим правило, в котором при инициализации необходимо вызвать скрипт. Для этого в него добавим два правила «transfer data»:

и в первый configure передадим «exp Resize TextArea» из вкладки Expression в DataLabel «dlResizeJS»:

Во второй configure передадим «exp Dynamic TextAreaSize» из вкладки Expression тоже в DataLabel «dlResizeJS»:

Таким образом скрипты будут выполняться последовательно.

 

Коротко про скрипт:

Скрипт проверяет длину и устанавливает высоту текстовой области.  Также отслеживает нажатия клавиш на клавиатуре. Таким образом после удаления строк текста высота текстовой области уменьшается  в зависимости от количества удаленных строк.