Control user focus

Dash Python
1

Hello everyone.
I have a task to make a form for a terminal with a barcode scanner.
Let’s say there is input1 and unput2 on the page. The user puts the cursor in field 1, clicks on the scanner, and the scanner enters three digits.
It is necessary to check whether these three digits are in the list of acceptable ones, and if so, then move the focus to the next field. This is necessary because the terminal has a small screen and poking there with your fingers is very inconvenient.
Is it possible to use callback to control the focus and indicate where to move it?
Or if not, how to correctly call a JS script when changing the inc_sec1 field, which will pass the id of the changed field and its contents?
I tried to create an input and a JS handler using DangerouslySetInnerHTML, but then I can’t access it from the plotly callback.
The page code is something like this:

from dash import dcc, register_page, html, callback, Input, Output, no_update

register_page(__name__, path_template="/inc/form", icon="fa-solid:home")

layout = html.Div(children=[
    dcc.Input(value="", placeholder="Секция 1", className='inc_element', maxLength=3, id='inc_sec1'),
    dcc.Input(value="", placeholder="ШК 1", className='inc_element', id='inc_su1'),
    html.Br(),
    html.Button('Сохранить данные', id='inc_save', n_clicks=0, style={'background-color': '#ffbcb8'}),
],)
1 Like
2

Hello @uk141,

Yes, you can control user focus by using a clientside callback. You’ll need to hook it to the input value of the other input, once the validation is passed, then you just triggered document.getElementById('input2').focus() and it should pass the focus there.

3

Oh, right.
I saw onclick= and expected to find onchange= somewhere. But yeah. JS is called differently on change.
Thanks =)