我正在构建一个带有破折号的应用程序,需要在前一个文本区域达到最大长度时自动从一个文本区域(或输入,如果这样会更好)移动到另一个文本区域,而无需单击新文本区域或按下选项卡按钮.
这是 html.Div,其中包含我需要自动切换的文本区域组件。
html.Div(
style = {
'display': 'flex',
'width': '90%',
'margin-left': '1.7%',
'backgroundColor': 'rgba(255,255,255,0)',
'borderColor': 'rgba(255,255,255,0)',
'margin-top': '7%',
},
children = [
dcc.Textarea(
value = 'MRN - Ep',
readOnly = True,
style = {
'textAlign': 'center',
'color': '#636E72',
'width': '30%',
'height': 80,
'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
'font-size': '40px',
'borderColor': 'rgba(255,255,255,0)',
'border-radius': '25px',
'background-color': 'rgba(255,255,255,0)',
'font-weight': 'bold',
'margin-top': '5%',
'margin-left': '-6.5%',
'overflow': 'auto',
'outline': 'none',
'-webkit-box-shadow': 'none',
'-moz-box-shadow': 'none',
'box-shadow': 'none',
},
),
html.Textarea(
id = 'mrnInput1',
placeholder = '',
maxLength = 1,
autoFocus = True,
style = {
'color': '#636E72',
'width': '6%',
'height': 100,
'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
'font-size': '40px',
'borderColor': '#DFE6E9',
'backgroundColor': '#F6FBFF',
'font-weight': 'light',
'margin-left': '-4.5%',
'margin-top': '2.8%',
'textAlign': 'center',
},
),
html.Textarea(
id = 'mrnInput2',
placeholder = '',
maxLength = 1,
style = {
'color': '#636E72',
'width': '6%',
'height': 100,
'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
'font-size': '40px',
'borderColor': '#DFE6E9',
'backgroundColor': '#F6FBFF',
'font-weight': 'light',
'margin-left': '2%',
'margin-top': '2.8%',
'textAlign': 'center',
},
),
html.Textarea(
id = 'mrnInput3',
placeholder = '',
maxLength = 1,
style = {
'color': '#636E72',
'width': '6%',
'height': 100,
'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
'font-size': '40px',
'borderColor': '#DFE6E9',
'backgroundColor': '#F6FBFF',
'font-weight': 'light',
'margin-left': '2%',
'margin-top': '2.8%',
'textAlign': 'center',
},
),
html.Textarea(
id = 'mrnInput4',
placeholder = '',
maxLength = 1,
style = {
'color': '#636E72',
'width': '6%',
'height': 100,
'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
'font-size': '40px',
'borderColor': '#DFE6E9',
'backgroundColor': '#F6FBFF',
'font-weight': 'light',
'margin-left': '2%',
'margin-top': '2.8%',
'textAlign': 'center',
},
),
html.Textarea(
id = 'mrnInput5',
placeholder = '',
maxLength = 1,
style = {
'color': '#636E72',
'width': '6%',
'height': 100,
'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
'font-size': '40px',
'borderColor': '#DFE6E9',
'backgroundColor': '#F6FBFF',
'font-weight': 'light',
'margin-left': '2%',
'margin-top': '2.8%',
'textAlign': 'center',
},
),
html.Textarea(
id = 'mrnInput6',
placeholder = '',
maxLength = 1,
style = {
'color': '#636E72',
'width': '6%',
'height': 100,
'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
'font-size': '40px',
'borderColor': '#DFE6E9',
'backgroundColor': '#F6FBFF',
'font-weight': 'light',
'margin-left': '2%',
'margin-top': '2.8%',
'textAlign': 'center',
},
),
dcc.Textarea(
value = '-',
readOnly = True,
style = {
'textAlign': 'center',
'color': '#636E72',
'width': '6%',
'height': 100,
'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
'font-size': '80px',
'borderColor': 'rgba(255,255,255,0)',
'border-radius': '25px',
'background-color': 'rgba(255,255,255,0)',
'font-weight': 'bold',
'margin-top': '3.5%',
'textAlign': 'center',
'overflow': 'auto',
'outline': 'none',
'-webkit-box-shadow': 'none',
'-moz-box-shadow': 'none',
'box-shadow': 'none',
},
),
html.Textarea(
id = 'episodeInput1',
placeholder = '',
maxLength = '1',
style = {
'color': '#636E72',
'width': '6%',
'height': 100,
'font-family': 'font-family: -apple-system, BlinkMacSystemFont, sans-serif',
'font-size': '40px',
'borderColor': '#DFE6E9',
'backgroundColor': '#F6FBFF',
'font-weight': 'light',
'margin-top': '2.8%',
'textAlign': 'center',
},
),
],
),
我已经尝试通过回调来操作 tabIndex、autoFocus 和 accessKey 以及使用单独的导入 JS 脚本,但都没有成功。我之前在一个单独的反应项目中设法做到了这一点,但我对 dash-python 没有运气。我想知道是否有人有任何潜在的解决方案或以前已经解决过这个问题。
谢谢!