Клавиатура и поле ввода

Инпут и клавиатура — пара элементов UI-Designer (редактор интерфейсов), тесно связанных между собой. Поле ввода само ничего не печатает: символы ему отдаёт экранная клавиатура, а текст уходит в программу по кнопке. У клавиатуры десятки полей оформления, и если забыть одно из них, клавиши станут невидимыми. Ниже описано, как связать инпут, клавиатуру и кнопки, как выбрать вид и язык, как оформить клавиши и поле и что уходит в программу. На четырёх примерах из интерфейса «Рецепты» показано, как это выглядит на UI-Panel (страница, на которой оператор работает с интерфейсом).

Краткие описания элементов — в «Справочнике элементов» (разделы «Инпут» и «Клавиатура»). Здесь — как их соединять и оформлять. Цвета, границы и тени — в «Оформлении интерфейса», слои — в «Сложной графике», окно Pop Up — во «Фрейме и Pop Up».

Как работает пара

Инпут — поле, в которое оператор касается на панели. Клавиатура — отдельный элемент со своими клавишами. Они связаны не сами по себе, а двумя ссылками, и каждую задаёте вы:

Где	Поле	Что выбрать
инпут	«Клавиатура»	клавиатуру интерфейса или «Нет клавиатуры»
клавиатура	«Базовый инпут»	инпут интерфейса или «Нет инпута»

Ссылки независимы: заданная в одну сторону не создаёт обратную. Если задать только «Клавиатуру» у инпута, а «Базовый инпут» оставить пустым, клавиатура, которая показывается «при любом инпуте» (см. ниже), будет работать, но привязанной к полю уже не станет. А если у клавиатуры «Появляется при» — «Базовый инпут», а сам «Базовый инпут» пуст («Нет инпута»), всплывающая клавиатура не появится ни для одного поля. Задавайте обе ссылки, чтобы пара вела себя одинаково при любых настройках. Импорт элемента из файла связей не создаёт: после импорта выберите их заново.

Кроме клавиатуры, у инпута две кнопки:

Поле инпута	Что делает кнопка
«Кнопка отправки»	по нажатию отправляет введённый текст в программу
«Кнопка очистки значения»	по нажатию стирает текст в поле

В обоих списках — кнопки интерфейса и пункт «Нет кнопки». Кнопки создайте заранее, как и клавиатуру: иначе выбирать будет не из чего.

Связи инпута: 1 — «Клавиатура», 2 — «Кнопка отправки», 3 — «Кнопка очистки значения»

Когда клавиатура появляется

Три поля клавиатуры определяют, где и когда её видно.

Поле	Значения	Что значит
«Тип»	«Фрейм» (по умолчанию)	клавиатура видна всегда, как обычный элемент страницы
	«Pop Up»	клавиатура скрыта и появляется, когда оператор касается поля ввода
«Появляется при»	«Любой инпут» (по умолчанию)	клавиатура показывается для любого поля, в которое коснулись
	«Базовый инпут»	только для того поля, которое выбрано в «Базовом инпуте»
«Тип перехода» и «Длительность перехода (мс)»	«Нет» (по умолчанию), «Проявление», «Выезд сверху», «Выезд снизу», «Выезд слева», «Выезд справа»; длительность по умолчанию 0	как клавиатура Pop Up появляется и исчезает

На панели клавиатура «Pop Up» выезжает, когда оператор касается поля, и уходит, когда он касается пустого места страницы.

Как выбирать «Тип»:

• «Фрейм» — когда клавиатура входит в раскладку страницы: цифровая панель набора номера рядом с полем, клавиатура для одного экрана ввода.

• «Pop Up» — когда место на странице нужно, пока оператор не печатает: клавиатура лежит поверх других элементов и выезжает при касании поля.

«Тип перехода» и «Длительность перехода (мс)» действуют так же, как у фрейма (см. «Фрейм и Pop Up»): без длительности переход мгновенный.

Примечание

Отдельного поля положения для клавиатуры Pop Up нет: она лежит там, где вы её поставили на странице. В примере «Поиск контакта» клавиатура с «Выездом снизу» стоит у нижнего края страницы. Не ставьте клавиатуру на место поля, в которое оператор должен коснуться: она может его закрыть.

Связи и показ клавиатуры: 1 — «Базовый инпут», 2 — «Вид клавиатуры», 3 — «Тип», 4 — «Появляется при», 5 — «Тип перехода», 6 — «Длительность перехода (мс)»

Виды и языки

Вид клавиатуры выбирается в «Вид клавиатуры», язык — в «Язык клавиатуры» («Русский» по умолчанию или «Английский»).

Вид	Что на клавиатуре
«Стандартный» (по умолчанию)	пять рядов: цифры, буквы, tab и ввод, два Shift, глобус с пробелом. Слои: обычный и верхний регистр
«Компактный»	четыре ряда без цифр и tab. Слои те же
«Мобильный»	четыре ряда без цифр. Слои: буквы, верхний регистр и «123» с цифрами и знаками
«Мобильный расширённый»	пять рядов, цифры сверху в буквенных слоях. Те же слои и «123»
«Почта»	пять рядов, клавиша «@», клавиша «.com» (в русской раскладке — клавиша с «Постфиксом электронной почты»), слой «123» с «.net», «.org», «.edu» (в русской — «.ru», «.рф», «.com», «.org»)
«Числовой»	цифры 1–9 и 0, точка (в русской раскладке — запятая), стереть и ввод. Один слой
«Телефонный набор»	цифры 1–9, «*», 0, «#», стереть, пробел и ввод. Один слой

Виды для ввода текста: 1 — «Стандартный», 2 — «Компактный», 3 — «Мобильный», 4 — «Мобильный расширённый»

Виды для почты и цифр: 1 — «Почта», 2 — «Числовой», 3 — «Телефонный набор»

Служебные клавиши рисуются значками: стереть, ввод, tab, Shift, глобус. Пробел — длинная клавиша без подписи. Клавиши «123», «abc» и «.com» (в русской раскладке — клавиша постфикса почты) вдвое шире обычных, пробел — вчетверо.

Что делают служебные клавиши на панели:

• глобус переключает русский и английский;

• «123» и «abc» переключают слой цифр и букв, Shift — верхний регистр;

• tab вставляет в поле несколько пробелов, а не переводит фокус на другой элемент.

Чтобы увидеть нужный слой в редакторе, включите поля «Перевести клавишу Shift в нажатое состояние» или «Перевести клавишу 123 в нажатое состояние»: клавиатура на холсте покажет слой верхнего регистра или «123». Переключить язык глобусом в редакторе нельзя: смотрите другой язык, меняя «Язык клавиатуры».

Примечание

У клавиатуры нет ограничений на то, что вводить. Вид «Числовой» только выбирает, какие клавиши показать. Режима «только цифры» и маски у инпута нет.

Оформление клавиатуры

Поля оформления клавиатуры лежат в разделе «Свойства Клавиатуры» (по порядку на экране): «Цвет шрифта», «Цвет фона кнопки», «Цвет фона», «Цвет фона нажатой кнопки», «Цвет текста нажатой кнопки», «Расстояние между строками», «Расстояние между кнопками», «Выравнивание символа внутри кнопки», «Внутренний отступ клавиатуры», «Внутренний отступ кнопки», «Тень Кнопки», «Граница кнопки». Шрифт и размер шрифта клавиш — перед ними.

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

Главная ошибка: клавиши прозрачны, пока не задан «Цвет фона кнопки». Клавиатура выглядит как буквы на общем фоне без кнопок, а границу и тень клавиш не видно. Сначала задайте «Цвет фона кнопки»: им закрашены клавиши. «Цвет фона» — другое поле, фон всей клавиатуры за клавишами.

Один и тот же вид «Компактный»: 1 — «Цвет фона кнопки» не задан: у клавиш нет своей заливки, видны только символы на «Цвете фона» клавиатуры, а пробел не виден вовсе; 2 — «Цвет фона кнопки» задан, и при ненулевых «Расстоянии между строками» и «Расстоянии между кнопками» каждая клавиша видна отдельной кнопкой

Поле	Что настраивает	Умолчание
«Цвет фона кнопки»	заливка клавиш	клавиши прозрачны
«Цвет фона»	фон корпуса клавиатуры за клавишами	#fff
«Цвет фона нажатой кнопки»	цвет фона клавиши в нажатом состоянии	#fff
«Цвет текста нажатой кнопки»	цвет символа в нажатом состоянии	#000
«Расстояние между кнопками»	зазор между клавишами	0
«Расстояние между строками»	зазор между рядами	0
«Внутренний отступ клавиатуры»	поле между краем корпуса и клавишами	0
«Внутренний отступ кнопки»	поле внутри клавиши вокруг символа	—
«Выравнивание символа внутри кнопки»	где стоит символ на клавише	—
«Граница кнопки»	рамка клавиши и её скругление (скругление — внутри границы)	—
«Тень Кнопки»	тень каждой клавиши	—
«Перевести кнопки в нажатое состояние»	показывает все клавиши в цветах нажатой клавиши (для оформления)	выкл.

Разделы «Свойства границы» и «Свойства тени» относятся к самому корпусу клавиатуры, «Граница кнопки» и «Тень Кнопки» — к клавишам. Не путайте их: рамка вокруг клавиатуры и рамка вокруг каждой клавиши настраиваются отдельно.

Что вы увидите: изменения «Цвета фона кнопки», границы, тени и скругления сразу видны на холсте. Чтобы увидеть цвета нажатой клавиши, включите «Перевести кнопки в нажатое состояние»: холст покажет клавиши в этих цветах.

Размер клавиш считается из размера клавиатуры. Клавиатура делит ширину на ряд: каждая обычная клавиша — одна доля, «123», «abc» и «.com» (в русской раскладке — клавиша постфикса почты) — две, пробел — четыре. В русском «Стандартном» виде в ряду примерно 14 долей, в «Компактном» — 13, в «Мобильном расширённом» — 12. Поэтому «Стандартной» клавиатуре нужна ширина порядка 850 px, иначе клавиши уже 60 px (при отступах и промежутках, равных 0 по умолчанию). Для неширокой панели берите «Числовой» или «Телефонный набор».

Оформление инпута

Инпут оформляется так же, как другие элементы: цвет, граница и тень — в общих разделах, текст — в «Свойствах текста», значок — в «Свойствах иконки». Что есть только у него:

Поле	Зачем	Умолчание
«Заголовок»	подсказка в пустом поле, пока оператор ничего не ввёл	—
«Показать заголовок»	показывает подсказку на холсте UI-Designer; на панели подсказка видна в пустом поле и без флажка	выкл.
«Цвет заголовка»	цвет подсказки	#000000
«Многострочный ввод»	разрешает несколько строк	выкл.
«Отправлять символы при изменении»	посимвольная отправка (см. «Что уходит в программу»)	выкл.

Главная ловушка: на холсте UI-Designer «Заголовок» в поле не виден, пока не включено «Показать заголовок». Если подсказка не появилась на холсте — проверьте этот флажок; на панели подсказка видна в пустом поле и без него. Фон инпута по умолчанию прозрачный, поэтому на светлой странице поле сливается с ней: задайте «Цвет фона» и границу.

Подсказка — не значение: когда оператор начнёт вводить, она исчезает, и в программу уходит только введённый текст.

Чтобы текст в поле смотрелся как «табло» или «поиск», используйте выравнивание и отступы в «Свойствах текста» и значок лупы в «Свойствах иконки» (пример — ниже, «Поиск контакта»).

Ещё у инпута нет:

• маски и шаблона ввода;

• режима «только цифры».

Что уходит в программу

Значение инпута попадает в программу только по «Кнопке отправки». Набранный на клавиатуре текст сам в программу не уходит.

Что сделал оператор	Что приходит в программу
нажал «Кнопку отправки»	событие инпута value_changed с введённым текстом целиком в поле value; кроме него — обычные события самой кнопки (push, release, tap)
нажал «Кнопку очистки значения»	только обычные события самой кнопки; события от инпута нет: текст стирается на панели, а программа значения не получает
нажал Enter на клавиатуре	ничего; в однострочном поле в значение добавляется перевод строки, набранное уходит вверх из вида, и поле выглядит пустым

Событие инпута — как у других элементов: отправитель (object) — инпут, а не кнопка. Пример: на табло набрали «1003» на клавиатуре «Числовой» и нажали «Позвонить». В программу пришло:

{"UI":{"Рецепты":{"object":"Rcp_InDial_in","event":"value_changed","value":"1003"}}}

Значение value — всегда одна строка: даже цифры приходят как "1003". После узла ui-switch (блок программы U-Logic) оно доступно как msg.payload.value. После нажатия кнопки отправки текст остаётся в поле.

Что из этого следует:

• Чтобы программа получила готовое значение, нужна «Кнопка отправки» («Позвонить», «Найти», «Отправить»). Enter её не заменяет.

• Для поиска «на лету» у инпута есть флажок «Отправлять символы при изменении», у клавиатуры — «Отправлять символы при нажатии». При включённом флажке каждый символ приходит в программу отдельным событием keyboard_button_pressed; проверьте узлом debug, что приходит.

• Enter в однострочном поле добавляет перевод строки: набранное уходит вверх из вида, и поле выглядит пустым, хотя текст не стёрт: дальнейший ввод продолжается после перевода строки. В программу Enter ничего не отправляет.

• Tab на клавиатуре в программу ничего не шлёт и вставляет в поле несколько пробелов.

Рецепты

Все четыре примера — вкладка «Клавиатура и ввод» интерфейса «Рецепты» (он входит в архив проекта «Демо-зал»; как загрузить архив — в «UI-Designer»). Откройте интерфейс в UI-Designer и выберите нужный элемент: имена вида Rcp_… указаны в заголовках.

Таблицы читайте так же, как в «Сложной графике»: значения даны в пикселях экрана 1920 × 1200, цвета — как в окне выбора цвета, «прозрачность» — ползунок прозрачности. В примерах все цвета сплошные.

Общие разделы («Свойства фона и изображения», «Свойства границы», «Свойства текста», «Свойства иконки», «Свойства тени») есть и у инпута, и у клавиатуры. Поля «Граница кнопки», «Тень Кнопки» и «Цвет фона кнопки» — только у клавиатуры и относятся к клавишам, а не к корпусу.

Набор номера: «Числовой» (Rcp_InDial_in, Rcp_KbDial_kb, Rcp_KbDial_call_b, Rcp_KbDial_clear_b)

Зачем: цифровая панель рядом с полем — оператор набирает номер или адрес и нажимает «Позвонить». Клавиатура видна всегда, поэтому «Тип» — «Фрейм».

Карточка «Набор номера» на UI-Panel: 1 — поле-«табло» с подсказкой, 2 — кнопка «Очистить», 3 — кнопка «Позвонить», 4 — клавиатура «Числовой»

Что настроено.

Инпут Rcp_InDial_in:

Раздел, поле	Значение	Что даёт
«Свойства фона и изображения»: «Цвет фона»	#0F172A	тёмное «табло»
«Свойства границы»	толщина 2, #1E293B, радиус 20	мягкая рамка
«Свойства тени»	внутренняя тень («Внутри»)	поле «утоплено»
«Свойства текста»	размер 44, жирный, белый, «справа по центру», отступ справа 28	цифры прижаты вправо, как на табло
«Заголовок», «Показать заголовок», «Цвет заголовка»	«Номер или адрес», включено, #64748B	подсказка в пустом поле
«Клавиатура», «Кнопка отправки», «Кнопка очистки значения»	Rcp_KbDial_kb, Rcp_KbDial_call_b, Rcp_KbDial_clear_b

Клавиатура Rcp_KbDial_kb:

Раздел, поле	Значение	Что даёт
«Вид клавиатуры», «Тип», «Появляется при»	«Числовой», «Фрейм», «Базовый инпут» (Rcp_InDial_in)	цифры 1–9, «запятая 0 стереть», широкий «ввод» на весь нижний ряд
размер	268 × 432	с отступом и зазором — клавиши 72 × 72
«Внутренний отступ клавиатуры», «Расстояние между кнопками» и «между строками»	16, 10, 10
«Граница кнопки»: радиус	36 (половина клавиши)	круглые клавиши
«Граница кнопки»: рамка	1, #CBD5E1
«Цвет фона кнопки», «Цвет шрифта», размер шрифта	#FFFFFF, #0F172A, 32 жирный	белые клавиши
«Тень Кнопки»	лёгкая тень клавиши
«Цвет фона нажатой кнопки», «Цвет текста нажатой кнопки»	#2563EB, #FFFFFF	синее нажатие
«Цвет фона»	#00000000 (прозрачный)	клавиши «висят» на карточке

Шаги:

1. Создайте инпут, кнопки «Позвонить» и «Очистить» и клавиатуру («Создать Виджет» → «Создать Инпут», «Создать Кнопку», «Создать Клавиатуру»).

2. У клавиатуры в «Вид клавиатуры» выберите «Числовой», «Тип» — «Фрейм».

3. Задайте «Цвет фона кнопки» (иначе клавиши прозрачны), «Граница кнопки» с радиусом, равным половине клавиши, и цвета нажатой кнопки.

4. У клавиатуры в «Базовый инпут» выберите инпут; у инпута — клавиатуру, «Кнопку отправки» («Позвонить») и «Кнопку очистки значения» («Очистить»).

Что вы увидите: на холсте — круглые клавиши. На панели касания набирают цифры в «табло», «Очистить» стирает текст и возвращает подсказку, «Позвонить» отправляет номер в программу, и в поле он остаётся. «Очистить» значения в программу не шлёт: приходят только события самой кнопки.

Почему «Числовой», а не «Телефонный набор». У «Телефонного набора» нижний ряд — стереть, пробел, ввод, и пробел занимает четыре доли ширины. При клавише 72 px стереть и ввод остаются узкими полосками около 36 px по краям. Чтобы они стали шире 64 px, клавиатуре нужно не меньше 436 px по ширине, а цифры станут «пилюлями» 128 × 72. У «Числового» пробела нет: ввод — одна клавиша на весь ряд, цифры остаются круглыми. Недостаток: нет «» и «#», вместо них запятая. Если «» и «#» нужны (тональный набор), берите «Телефонный набор» шире 436 px; пробел при этом останется длинным.

Поиск контакта: клавиатура выезжает снизу (Rcp_InSearch_in, Rcp_KbSearch_kb, Rcp_KbSearch_find_b, Rcp_KbSearch_clear_b, Rcp_KbEcho_lb)

Зачем: поле поиска и клавиатура, которая занимает место, только пока оператор печатает. «Тип» — «Pop Up», «Появляется при» — «Базовый инпут»: клавиатура реагирует только на касание своего поля.

Карточка «Поиск контакта» до касания поля: 1 — поле с подсказкой «Найти контакт…» и значком лупы, 2 — кнопка «Найти», 3 — кнопка «Стереть», 4 — подпись «В программу:» (в неё программа выводит значение, пришедшее от инпута); клавиатуры нет

Тот же экран после касания поля: 1 — клавиатура выехала снизу, 2 — кнопка «Найти»

Что настроено.

Инпут Rcp_InSearch_in:

Раздел, поле	Значение	Что даёт
«Цвет фона», «Свойства границы»	#FFFFFF, толщина 2, #CBD5E1, радиус 44	поле-«пилюля»
«Свойства иконки»	«search», размер 36, #64748B, «слева по центру», отступ слева 28	значок лупы в поле
«Свойства текста»	размер 30, «слева по центру», отступ слева 80	текст правее значка
«Заголовок», «Показать заголовок», «Цвет заголовка»	«Найти контакт…», включено, #94A3B8	подсказка
«Клавиатура», «Кнопка отправки», «Кнопка очистки значения»	Rcp_KbSearch_kb, Rcp_KbSearch_find_b («Найти»), Rcp_KbSearch_clear_b	по «Найти» текст поля уходит в программу

Клавиатура Rcp_KbSearch_kb:

Раздел, поле	Значение	Что даёт
«Вид клавиатуры», «Тип», «Появляется при»	«Стандартный», «Pop Up», «Базовый инпут» (Rcp_InSearch_in)	клавиатура скрыта, пока не коснулись поля
«Тип перехода», «Длительность перехода (мс)»	«Выезд снизу», 250	плавный выезд
размер и место	1856 × 504, внизу оверлея, поверх карточек 3 и 4	Pop Up лежит там, где поставлен
«Цвет фона», «Свойства границы» (радиус), «Свойства тени»	#F1F5F9, 28, X 0, Y 24, размытие 64, #0F172A, прозрачность 35 %	«лист», выехавший снизу
«Цвет фона кнопки», рамка кнопки, радиус, шрифт	#FFFFFF, 1 #CBD5E1, 14, 28 жирный	белые клавиши
«Цвет фона нажатой кнопки», «Цвет текста нажатой кнопки»	#2563EB, #FFFFFF

Шаги: как в предыдущем рецепте, но создайте кнопки «Найти» и «Стереть». «Тип» клавиатуры — «Pop Up», «Тип перехода» — «Выезд снизу», «Длительность перехода (мс)» — 250. У инпута в «Кнопке отправки» выберите «Найти», в «Кнопке очистки значения» — «Стереть». Enter значение не отправляет, поэтому в программу текст уходит по «Найти». Чтобы поиск шёл «на лету», можно вместо кнопки включить посимвольную отправку (см. «Что уходит в программу»).

Показ клавиатуры Pop Up: 1 — «Тип», 2 — «Появляется при», 3 — «Тип перехода», 4 — «Длительность перехода (мс)»

Что вы увидите: на панели клавиатуры не видно, пока оператор не коснулся поля. После касания клавиатура выезжает снизу, после касания пустого места уходит. Подсказка в поле остаётся до первого символа. Наберите, например, «пере» и нажмите «Найти»: в подписи появится «В программу: пере».

Тёмная клавиатура (Rcp_InDark_in, Rcp_KbDark_kb)

Зачем: клавиатура для тёмного интерфейса, где клавиши тёмные, а буквы светлые.

Карточка «Тёмная» на UI-Panel: 1 — поле «Введите текст», 2 — клавиатура «Компактный» с тёмными клавишами и светлыми буквами

Раздел, поле	Значение	Что даёт
«Вид клавиатуры»	«Компактный»	четыре ряда без цифр
«Цвет фона», «Свойства границы» корпуса, «Свойства тени» корпуса	#0F172A, радиус 24, X 0, Y 16, размытие 32, #0F172A, прозрачность 25 %	тёмный корпус
«Цвет фона кнопки», «Цвет шрифта», размер шрифта	#1E293B, #E2E8F0, 26 жирный	тёмные клавиши, светлые буквы
«Граница кнопки»	1, #334155, радиус 12	граница отделяет клавиши друг от друга
«Тень Кнопки»	X 0, Y 2, размытие 0, #000000, прозрачность 40 %	нижняя «грань» клавиши
«Цвет фона нажатой кнопки», «Цвет текста нажатой кнопки»	#3B82F6, #FFFFFF	акцентное нажатие
«Внутренний отступ клавиатуры», «Расстояние между кнопками», «между строками»	16, 10, 10

На тёмных клавишах задайте светлый «Цвет шрифта» и проверьте на панели, что значки служебных клавиш (стереть, ввод, Shift) читаются.

Оформление клавиш: 1 — «Цвет шрифта», 2 — «Цвет фона кнопки», 3 — «Цвет фона нажатой кнопки», 4 — «Тень Кнопки», 5 — «Граница кнопки»

Мобильная клавиатура (Rcp_InMsg_in, Rcp_KbLight_kb)

Зачем: светлая клавиатура, как в телефоне: белые клавиши на светло-серой подложке, без рамок, цифры сверху.

Карточка «Мобильная» на UI-Panel: 1 — поле «Сообщение…», 2 — клавиатура «Мобильный расширённый» с цифровым рядом

Раздел, поле	Значение	Что даёт
инпут: фон, граница, «Заголовок»	белый, толщина 2, #CBD5E1, радиус 40, «Сообщение…»	поле сообщения над клавиатурой
«Вид клавиатуры»	«Мобильный расширённый»	цифры сверху, слой «123»
«Цвет фона»	#E5E7EB	светло-серая подложка
«Цвет фона кнопки», «Цвет шрифта», размер шрифта	#FFFFFF, #111827, 24	белые клавиши
«Граница кнопки»	без рамки, радиус 10	клавиши без рамок
«Тень Кнопки»	X 0, Y 1, размытие 0, #000000, прозрачность 30 %	тонкая тень снизу вместо рамки
«Цвет фона нажатой кнопки», «Цвет текста нажатой кнопки»	#CBD5E1, #111827	неяркое нажатие
«Внутренний отступ клавиатуры», «Расстояние между кнопками», «между строками»	12, 8, 10	клавиши около 62 × 62

Частые ошибки

• Клавиши не видно, на фоне только буквы. Не задан «Цвет фона кнопки»: клавиши прозрачны. Задайте его; «Цвет фона» — это фон корпуса.

• Нажатая клавиша на тёмной клавиатуре выглядит чужой. По умолчанию «Цвет фона нажатой кнопки» белый, а «Цвет текста нажатой кнопки» чёрный: задайте оба под вашу палитру.

• Клавиатура не появляется на панели. «Тип» — «Pop Up», а «Появляется при» — «Базовый инпут», и в «Базовом инпуте» выбрано другое поле или «Нет инпута». Задайте ссылки в обе стороны или выберите «Любой инпут».

• Касание клавиш ничего не печатает. Проверьте, что у инпута в «Клавиатуре» выбрана именно та клавиатура, на которой вы нажимаете, а в её «Базовом инпуте» — этот инпут.

• Подсказка в поле не видна на холсте. Не включён «Показать заголовок».

• Текст набран, но в программу не пришёл. Не задана «Кнопка отправки» или оператор нажал не её. Значение уходит только по этой кнопке.

• Ждёте значение по Enter — его нет. Enter ничего не отправляет, а в однострочном поле набранное уходит из вида, и поле выглядит пустым; ставьте «Кнопку отправки».

• От «Очистить» ждёте пустое значение. «Кнопка очистки значения» стирает текст на панели, а в программу шлёт только события самой кнопки (push, release, tap).

• Поле сливается со страницей. Фон инпута по умолчанию прозрачный: задайте «Цвет фона» и границу.

• Клавиши мелкие. Растяните клавиатуру шире или выберите вид с меньшим числом клавиш в ряду: «Компактный», «Мобильный», «Числовой».

• Ищете маску ввода. Её у инпута нет. Для номера выберите вид клавиатуры «Числовой» или «Телефонный набор».

• После импорта клавиатура и поле не связаны. Импорт элемента связей не переносит: выберите «Клавиатуру» и «Базовый инпут» заново.

• На панели всё по-старому. Нажали «Сохранить», но не «Опубликовать» (см. «UI-Designer»).