When the user presses the enter key, I would like the focus to switch to the next text area

How to
1

What do you want to achieve?

I have a numeric keyboard, and many text areas containing various parameters. A user should be able to tap a text area, see that it has been focused, and then type into it. If the user presses the check mark key, focus should switch to the next text area. The effect should be exactly the same as tapping the next text area.

What have you tried so far?

Each text area has a focused event with “keyboard set target” to itself. This works perfectly. Pressing enter on the keyboard of course does nothing.

I added some C code to send LV_EVENT_FOCUSED to the next text area when enter is pressed. This does focus the new area, but visually the previous text area is still hightlighted with a blinking cursor.

Adding LV_EVENT_DEFOCUSED to the previous text area caused very weird behavior.

Using LV_EVENT_CLICKED instead of LV_EVENT_FOCUSED did not change the focus.

If I could just fully simulate a “click” on the new text area that should do exactly what I want. But I’m not sure how to do it. Sending a LV_EVENT_CLICKED seemingly does not do the focus changing background stuff that normally goes along with a click.

  • SquareLine Studio version: 1.3.4
  • Operating system: Windows 10
  • Target hardware: STM32 custom board
2

Hi Henry!

In order to be able to type in a text field, it must be assigned to the keyboard, e.g. in lvgl8-3-11:

lv_keyboard_set_textarea(ui_Screen_Keyboard, ui_Screen_TextArea1);

lv_keyboard_set_textarea(ui_Screen_Keyboard, ui_Screen_TextArea2);

ui_Screen_Keyboard ← your keyboard
ui_Screen_TextArea1, ui_Screen_TextArea2, etc… ← your text areas

an example with textarea_event_cb:

lv_obj_add_event_cb(ui_Screen_TextArea1, textarea_event_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ui_Screen_TextArea2, textarea_event_cb, LV_EVENT_ALL, NULL);

//The textarea_event_cb:
static void textarea_event_cb(lv_event_t * e) {
   lv_event_code_t code = lv_event_get_code(e);
   lv_obj_t * ta = lv_event_get_target(e);
   if(code == LV_EVENT_CLICKED || code == LV_EVENT_FOCUSED) {
   /*Focus on the clicked text area*/
     if(ui_Screen_Keyboard != NULL)
       lv_keyboard_set_textarea(ui_Screen_Keyboard, ta);
   }

   else if(code == LV_EVENT_READY) {
     LV_LOG_USER("Ready, current text: %s", lv_textarea_get_text(ta));
   }
}

Have a good job
Viti

3

Hi Viti,

Thank you, but I have already tried that. Changing the text area works. After changing the focus I can type in the new area. The issue is that the style of the previous text area remains “focused”, which is confusing. When tapping with a finger, the previous area is visually defocused as expected. I cannot change the focus programmatically in a way that mimics this.

4

I am sending a project file. In this, everything you want is solved by events. (I hope :slight_smile: )
We have keyboard1, textarea1, textarea2, textarea3 and textarea4. First, textarea1 is focused and assigned to keyboard1.
We enter the text, then press the ‘ok’ button in keyboard at the bottom right. Then we jumps to textarea2. We enter the text here as well, then press the ‘ok’ button, then we will jump to textarea3. Here too, text + ‘ok’, we jump to textarea4. Here, after text + ‘ok’, we jump back to textarea1.
Each textarea has 7 events, 4 with ‘trigger focused’ and 3 with ‘trigger ready’. The latter means pressing the ‘ok’ button.
In the project, you can view the settings of the textarea events. In the ui/ui.c file (///// FUNCTIONS /////), you can see the code of the events after export

Have a nice job
Viti

3660.zip (115.7 KB)

2 Likes
5

Thanks very much! That seems to work, at least in the simulation. Afaik I was doing the same thing as this demo does (manually adding and removing the focus), not sure why mine didn’t work.

2 Likes