Estoy tratando de mover el foco al siguiente campo de entrada cuando alcanzan su longitud máxima. (Escuché que esto se llama 'autotabbing' en otras partes en varias páginas de stackoverflow).
Estoy usando dash-bootstrap-components (dbc), pero supongo que eso realmente no cambiará la respuesta frente a dcc
Los campos de entrada se generan con:
import dash from dash import dcc, html, dash_table, Input, Output, State, MATCH, ALL import dash_bootstrap_components as dbc from app.data_operations import * app = dash.Dash() app.layout = html.Div( dbc.Row( children=[ dbc.Col(dbc.Input(id={'identifier': 'form', 'element_id': i}, placeholder='A', type='text', size="lg", maxlength=1, value='')) for i in range(5) ], justify='between', ), )Hasta ahora he probado:
¿Hay una solución de Dash/Python aquí?
¿O algún tipo de script externo que pueda agregar aquí?
(Soy un verdadero novato de javascript, así que realmente no sé cómo haría para escribir las funciones para eso)
De hecho, esto es posible, pero la dificultad para mí fue aplazar la ejecución de JavaScript. pip install dash_defer_js_import hace el truco.
Mi estructura de carpetas se ve así:
Project/ |-- app.py |-- assets/ | |-- script.js Dash carga automáticamente cualquier contenido viable en los assets , pero dado que la secuencia de comandos debe aplazarse, debe ignorarse al crear la aplicación. (Uno pensaría que puede poner el script en otro lugar, pero no puedo hacer que se ejecute de otra manera por alguna razón).
Aparte de eso, solo le doy al elemento un nombre de clase para identificarlo. El contenido completo de app.py se ve así:
import dash import dash_bootstrap_components as dbc import dash_defer_js_import as dji from dash import html app = dash.Dash(__name__, assets_ignore='script.js') app.layout = html.Div([ dbc.Row( children=[ dbc.Col(dbc.Input(id={'identifier': 'form', 'element_id': i}, placeholder='A', className="focus-next", type='text', size="lg", maxlength=1, value='')) for i in range(5) ], justify='between', ), dji.Import(src='assets/script.js') ]) app.run_server() En el script, reúno todos los elementos con el nombre de clase designado focus-next y agrego un detector de eventos que verifica si la longitud de su valor es igual a su maxlength de longitud máxima. En caso afirmativo, enfoque el siguiente elemento de focus-next en la línea. Contenido de assets/script.js :
const inputs = document.querySelectorAll('.focus-next') for (let i = 0; i < inputs.length - 1; i++) { inputs[i].addEventListener('input', () => { if (String(inputs[i].value).length === parseInt(inputs[i].getAttribute('maxlength'))) inputs[i + 1].focus() }) }