Зв'яжіться з нами

K2 Five 19 Жовтня 2020

Спосіб реалізації зміни розміру текстової області під час внесення даних користувачем

Завдяки цьому способу текстова область змінюватиме свій розмір в залежності від кількості рядків, введених користувачем.

Зміна розміру текстової області відбуватиметься за допомогою JQuery скрипта. Для реалізації нам достатньо на View створити 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»:

Таким чином скрипти будуть виконуватися послідовно.

 

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

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