Textarea

Single-line textarea with button matrix

Feed a one-line textarea from a numeric button matrix.

A textarea is placed at the top in one-line mode and forced into LV_STATE_FOCUSED so the cursor stays visible. A four-row button matrix holds digits 0..9 plus LV_SYMBOL_BACKSPACE and LV_SYMBOL_NEW_LINE. Its LV_EVENT_VALUE_CHANGED handler appends the pressed character, deletes on backspace, or sends LV_EVENT_READY to the textarea on new line. The matrix drops LV_OBJ_FLAG_CLICK_FOCUSABLE so focus stays with the textarea.

Password and text fields with keyboard

Two one-line textareas share a keyboard, one masked for password entry.

A left textarea has lv_textarea_set_password_mode enabled so input is masked, a right textarea keeps plain text, and each is labelled Password: or Text: above it. An lv_keyboard occupies the bottom half. A shared LV_EVENT_ALL handler retargets the keyboard on LV_EVENT_CLICKED or LV_EVENT_FOCUSED, and logs the text on LV_EVENT_READY.

Auto-format HH:MM clock input

Insert the : automatically after the first two digits.

A one-line textarea restricts input to 0123456789: via lv_textarea_set_accepted_chars and caps the length at 5. A LV_EVENT_VALUE_CHANGED callback checks the first two characters and, once both are digits with no colon in position 2, moves the cursor and calls lv_textarea_add_char(':'). A numeric lv_keyboard in LV_KEYBOARD_MODE_NUMBER feeds the textarea.

Custom textarea cursor styles

Apply three different cursor styles to three one-line textareas.

Three lv_style_t values are built for LV_PART_CURSOR | LV_STATE_FOCUSED. The simple style draws only a red border, the underline style disables the background and uses LV_BORDER_SIDE_BOTTOM with a blue 3 px border, and the block style fills with an orange-to-yellow vertical gradient, a red border, and a 4 px radius. A helper creates each textarea, forces LV_STATE_FOCUSED, and attaches one style so the cursor shape matches its label.