Перейти к содержанию

TextBox#

TextBox - элемент управления, предназначенный для отображения и редактирования текста.

Свойства#

id#

Идентификатор контрола.

Отнаследовано от Control.

hint#

Всплывающая подсказка, которая появляется при наведении на контрол.

Отнаследовано от Control.

hintLength#

тип значение по умолчанию допустимые значения
int -

максимальное количество символов для всплывающей подсказки

tags#

Позволяет объединять контролы в группы, возвращает массив имен.

Отнаследовано от Control.

captionWidth#

Ширина заголовка в колонках (для Bootstrap-верстки).

отнаследовано от Control. По умолчанию значение 1

editorWidth#

Ширина контрола в колонках (для Bootstrap-верстки).

отнаследовано от Control. По умолчанию значение 2

captionTextAlign#

тип значение по умолчанию допустимые значения
string left left/right

Выравнивание текста заголовка контрола (доступно с версии 3.26.0)

denyRoles#

Список ролей без прав на данный элемент.

Отнаследовано от Control.

readRoles#

Список ролей на чтение данных.

Отнаследовано от Control.

writeRoles#

Список ролей на изменение данных.

Отнаследовано от Control.

visible#

Видимость контрола.

Отнаследовано от Control.

width#

Ширина контрола.

Отнаследовано от Control.

caption#

тип значение по умолчанию допустимые значения
string -

Заголовок контрола

placeholder#

тип значение по умолчанию допустимые значения
string -

Вспомогательный текст в поле ввода контрола

bind#

тип значение по умолчанию допустимые значения
string -

Свойство, к которому биндится контрол

mask#

тип значение по умолчанию допустимые значения
string ''

Структура маски

maxLength#

тип значение по умолчанию допустимые значения
int -

Максимальная длина строки

validCharacters#

тип значение по умолчанию допустимые значения
string -

Список допустимых символов

value#

тип значение по умолчанию допустимые значения
string -

Значение контрола без биндинга

readOnly#

тип значение по умолчанию допустимые значения
bool false true/false

Режим "только для чтения"

enabled#

тип значение по умолчанию допустимые значения
bool true true/false

Доступность контрола для редактирования

clearButtonVisible#

тип значение по умолчанию допустимые значения
bool true true/false

Видимость кнопки очистки значения.

Методы#

focus#

Устанавливает фокус на контрол.

Отнаследовано от Control.

validate#

Проверка значения маске.

Проверяет соответствие пользовательского ввода заданной маске. Возвращает значение true, когда введенное значение null, пустая строка или соответствует маске. Возвращает значение false в остальных случаях.

События#

valueChanged#

Возникает при смене значения

focused#

Возникает при получении фокуса

blured#

Возникает при потере фокуса

keyDown#

Срабатывает в момент нажатия клавиши, но когда она еще не отпущена

keyUp#

Возникает в момент отпускания нажатой клавиши

keyPressed#

Срабатывает, когда клавиша на клавиатуре нажата и отпущена, что эквивалентно совместному действию onkeydown и onkeyup

параметр тип описание
s Event экземпляр класса Event 
1
2
3
s = TextBox {
    ... // экземпляр класса TextBox
}
Примеры 
1
<TextBox ... valueChanged="test" />

1
<TextBox ... focused="test" />

1
<TextBox ... blured="test" />

1
<TextBox ... keyDown="test" />

1
<TextBox ... keyUp="test" />

1
<TextBox ... keyPressed="test" />

1
2
3
test (s) {
    console.log('s', s)
}

Коллбэки#

pasteHandler#

Позволяет редактировать текст при вставке и при наличии mask.

Входные параметры коллбэка: 

1
pasteHandler(element)
параметр тип описание
element string вставляемый в контрол текст
Пример 
1
<TextBox ... mask="LL-LL" pasteHandler='pasted' />

1
2
3
pasted(element) {
    return 'test' + element
}

Поведение#

Предупреждение

Не рекомендуется изменять значения свойств mask, maxLength, validCharacters контрола TextBox после сохранения данных, привязанных к этому контролу. Старые данные могут не удовлетворять настройкам контрола, в результате они отображаться не будут.

Использование маски#

см. Постановка: маска ввода

Маска должна позволять установить строгий формат ввода данных пользователем и представлять из себя строку состоящую из обычных(константа) и спец символов. При вводе обычные символы пользователь не может их удалить или заменить, спец символы задают ограничения на вводимые данные.

Спец символы:

  • # - ввод цифр
  • L - ввод букв
  • A - ввод цифр и букв
  • [abcd] - список допустимых символов. Можно указать диапазон символов для цифр [1-5] и для букв [а-я] (при указании в списке допустимых символов "]" и "-" необходимо их дополнительно экранировать символом "\", например "abcd]efg-h")

При задании маски, настройки свойств количества символов и допустимых символов игнорируются, т.к. маска уже задает эти ограничения. В качестве символа маски используется "_"

Примечание

Если введенное пользователем значение не соответствует маске, то свойство value вернет значение null.

Использование свойств maxLength или validCharacters#

При одновременной установке значений mask, maxLength и validCharacters приоритетом обладает свойство mask

Пример#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<Group caption="TextBox">
    <TextBox caption="Ввод по маске ###-LLL-AAAA-[0-9A-F]" id="textBoxMask" 
        mask="###-LLL-AAAA-[0-9A-F]" 
        editorWidth="2" captionWidth="3" />
    <TextBox caption="Ввод определенных символов" id="textBoxMask" 
        validCharacters="#KLOP123456" hint="Разрешённые символы: #KLOP123456"
        editorWidth="2" captionWidth="3" />
    <TextBox caption="Ограниченная длина и символы" id="textBoxMask" 
        maxLength="10" validCharacters="1234567890" hint="Только 10 цифр"
        editorWidth="2" captionWidth="3" />
    <TextBox caption="Ввод телефона" id="textBoxMask" 
        mask="8-(###)-###-##-##" hint="Маска: 8-(###)-###-##-##"
        editorWidth="2" captionWidth="3" />
</Group>

Контрол TextBox предоставляет несколько способов указания правил ввода текстовых данных:

  • ограничение максимальной длины ввода - свойство maxLength;
  • ограничение допустимых символов - свойство validCharacters;
  • ввод по произвольно настраиваемой маске - свойство mask.

В первом примере используется произвольная маска, которая устанавливает правило ввода в виде набора из трёх цифр, трёх букв, четырёх цифр или букв и одного символа из указанного диапазона, разделённых дефисом. Второй пример ограничивает допустимый ввод набором разрешённых символов. Третий TextBox разрешает вводить число максимальной длиной в 10 знаков. В последнем примере представлена маска для ввода чисел в виде номера телефона.