达到最大长度时在文本区域之间自动切换

问题描述 投票:0回答:0

我正在构建一个带有破折号的应用程序,需要在前一个文本区域达到最大长度时自动从一个文本区域(或输入,如果这样会更好)移动到另一个文本区域,而无需单击新文本区域或按下选项卡按钮.

这是 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 没有运气。我想知道是否有人有任何潜在的解决方案或以前已经解决过这个问题。

谢谢!

python html reactjs textarea plotly-dash
© www.soinside.com 2019 - 2024. All rights reserved.