(一)功能
输入Input用于提供数字、文本、网址、邮箱、密码等样式的输入，用于数据交互用。Dash Bootstrap Components中有关Input的控件主要有输入框Input、文本输入框Textarea、下拉列表Select(类似Dropdown)、单选按钮(RadioItems、RadioButton)、复选框(Checklist、Checkbox)，各类输入框对应的参数总结如下图所示。本节重点讲解Input的使用方法。
(二)调用方式
dbc.Input(placeholder="Input goes here...",type="text")
(三)Input系列关键参数
value(字符串|数字，可选)：显示的默认值。
disabled(布尔值，可选)：设置为True时，Input不可编辑。
autoComplete(字符串，可选)：autocomplete属性规定输入字段是否应该启用自动完成功能。默认情况下是启动的，也就是当你点击了input获取焦点之后浏览器会自动将以前的输入记录作为填入选项显示出来。这个是HTML5中的新属性，在不支持HTML5的浏览器下是没有用的。注释：autocomplete 属性适用于 ，以及下面的 类型：text, search, url,telephone, email, password, datepickers, range 以及 color。在一部分浏览器中，autocomplete 属性是默认关闭的，如果需要打开就打开 一下。
autoFocus(字符串，可选)：加载页面后，该元素应自动聚焦，即该Input处于激活状态，光标在该Input中闪烁，无需再点击鼠标定位。
inputMode(值等于：“ verbatim”，“ latin”，“ latin-name”，“ latin-prose”，“ full-width-latin”，“ kana”，“ katakana”，“numeric”，“ tel” ，“emial”，“url”(可选)。是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。适用于iOS的Safari和适用于Android的Chrome。
max(字符串|数字，可选)：限定输入的最大值(数字或日期时间)，不得小于其最小值(min属性)。
min(字符串|数字，可选)：限定输入的最小值(数字或日期时间)，不得大于其最大值(max属性)。
maxLength(字符串，可选)：如果type属性的值是text，email，search，password，tel或url，则此属性指定用户可以输入的最大字符数(以UTF-16代码单位)。对于其他控件类型，将忽略它。它可以超过size属性的值。如果未指定，则用户可以输入不限数量的字符。指定负数将导致默认行为(即用户可以输入无限数量的字符)。仅当属性值已更改时才评估约束。
minLength(字符串，可选)：如果type属性的值为text，email，search，password，tel或url，则此属性指定用户可以输入的最小字符数(以Unicode代码点表示)。对于其他控件类型，将忽略它。
step(字符串|数字，可选)：与min和max属性配合使用，以限制可以设置数字或日期时间值的单次递增的步长。如果此属性未设置为任何值，则控件仅接受步长值(大于最小值)的倍数的值。
size(字符串，可选)：控件的初始大小。除非type属性的值为文本或密码，否则该值以像素为单位，在这种情况下，它是整数个字符。仅当type属性设置为text，search，tel，url，email或password时，此属性才适用，否则将被忽略。此外，大小必须大于零。如果未指定大小，则使用默认值20。
bs_size(字符串，可选)：设置输入Input的大小。选项：“ sm”(小)，“ md”(中)或“lg”(大)。默认值为“ md”。
valid(布尔值，可选)：对输入应用有效的样式以进行反馈。这将导致显示包含valid=True的封闭FormGroup中的任何FormFeedback。
invalid(布尔值，可选)：将无效的样式应用于输入，以进行反馈。这将导致显示包含valid=False的封闭FormGroup中的任何FormFeedback。
plaintext(布尔值，可选)：对于设置为纯文本的只读输入，将其设置为true，并删除默认的表单字段样式，并保留正确的边距和填充。
placeholder(字符串，可选)：向用户提示可以在控件中输入的内容。占位符文本不得包含回车符或换行符。注意：不要使用占位符属性代替元素，因为它们的用途是不同的。属性描述了表单元素的作用(即，它指示了期望的信息类型)，而占位符属性则暗示了内容应采用的格式。在某些情况下，占位符属性永远不会显示给用户，因此如果没有该属性，则表单必须是可以理解的。
name(字符串，可选)：控件的名称，与表单数据一起提交。
pattern(字符串，可选)：pattern 属性规定用于验证 元素的值的正则表达式。检查控件值的正则表达式。模式必须与整个值匹配，而不仅仅是某些子集。使用title属性描述模式以帮助用户。当type属性的值为text，search，tel，url，email或password时，该属性适用，否则将被忽略。正则表达式语言与JavaScript RegExp算法相同，带有“ u”参数，该参数使它将模式视为unicode代码点的序列。图案不被正斜杠包围。
n_submit(数字，可选)：输入具有焦点时按Enter键的次数。
n_submit_timestamp(数字，可选)：上次按下Enter键的时间。
n_blur(数字，可选)：输入失去焦点的次数。
n_blur_timestamp(数字，可选)：上一次
debounce(布尔值，布尔值，可选)：如果为true，则只有在按下Enter键或组件失去焦点时，输入的更改才会发送回Dash服务器。如果为假，它将在每次更改时将值发送回去。实现数字输入的防抖效果。在实现搜索框对输入进行动态查询的时候，我们需要防止前端频繁的发送查询请求给后端，这个时候就需要用到debounce，它可以设置一个时间间隔，比如300ms，忽略300毫秒内的输入变化。
persistence(布尔值|字符串|数字，可选)：用于在刷新组件(或页面)时保留该组件中的用户交互。如果`persisted`是真实的并且没有从其先前的值更改，只要新的`value'也与最初给出的值匹配，则用户在使用应用程序时更改的`value`将保留该更改。与`persistence_type`结合使用。
persisted_props(值列表，等于：'value's，可选)：刷新组件或页面后其用户交互将保留的属性。由于只允许使用“值”，因此通常可以忽略该道具。
persistence_type(值等于：“ local”，“ session”，“ memory”，可选)：将存储持久的用户更改的位置：memory：仅保存在内存中，在刷新页面时重置。local：window.localStorage，退出浏览器后保留数据。session：window.sessionStorage，一旦浏览器退出，数据将被清除。
(四)Input使用层层深入
1. 最简单的使用
dbc.Input(id="input", placeholder="Type something...", type="text")
import dash_bootstrap_components as dbcimport dash_html_components as htmlfrom dash.dependencies import Input, Outputtext_input = html.Div( [ dbc.Input(id="input", placeholder="Type something...", type="text"), html.Br(), html.P(id="output"), ])@app.callback(Output("output", "children"), [Input("input", "value")])def output_text(value): return value2. 通过bs_size参数设置改变Input大小
Card中CardHeader、CardBody及CardFooter均可使用Dash Bootstrap Components中的其他组件，如按钮Button、超链接Link、html元素及嵌入图片等。
inputs = html.Div( [ dbc.Input( placeholder="A large input...", bs_size="lg", className="mb-3" ), dbc.Input( placeholder="A medium input...", bs_size="md", className="mb-3" ), dbc.Input(placeholder="A small input...", bs_size="sm"), ])3. 为Input添加标签Label和提示语FormText
在Input输入时为方便用户理解所填的信息，一般需要添加标签和提示语，用于提示用户填写何类信息及对用户所填信息及时反馈正确与否。
text_input = dbc.FormGroup( [ dbc.Label("Text"), dbc.Input(placeholder="Input goes here...", type="text"), dbc.FormText("Type something in the box above"), ])4. 通过设置valid和invalid参数为Input添加验证
(1)基本用法
inputs = html.Div( [ dbc.Input(placeholder="Valid input...", valid=True, className="mb-3"), dbc.Input(placeholder="Invalid input...", invalid=True), ])(2)结合回调函数实现动态验证
上述使用方法仅仅能实现显示功能，在实际使用中还必须通过构建回调函数实现根据用户输入的动态验证。下面通过一个具体的加法案例说明动态验证的基本功能的实现。该案例主要实现如下功能及测试：简单两个数字加法的实现，并验证其正确如否。
"""## 输入(Input)用于提供数字、文本、网址、邮箱、密码等样式的输入，用于数据交互用；"""import dashimport dash_bootstrap_components as dbcimport dash_html_components as htmlfrom dash.dependencies import Input,Output, Stateapp = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])page = dbc.Container([ dbc.Row([ dbc.Col([ html.Div([ dbc.Input(placeholder='plz input a number',id='numberA',type='text',name='test', size=43, bs_size='lg',valid=True, autoComplete=True,persistence=True), # ,autoFocus=True dbc.Input(placeholder='plz input a number', id='numberB',type='text',inputMode='numeric',autoComplete=True,invalid=True, persistence=True), # autoFocus=True,persistence=True dbc.Input(id='numbersum', type='number',persistence=True), ], style={'display':'flex'}) ], width=4) ]), dbc.Row([ dbc.Col([ dbc.Button('求和',id='Sum') ]) ]), dbc.Row([ dbc.Col([ ]) ]),])app.layout = html.Div([page])@app.callback(Output('numbersum','value'), [Input('numberA','value'), Input('numberB','value'), Input('Sum','n_clicks')])def Update(A,B,n): if n: return A + B else: return 0if __name__ == "__main__": app.run_server(debug=True, port=8010)(五)Input教程完整代码
总体效果图如下：
完整代码如下：
"""## 输入(Input)用于提供数字、文本、网址、邮箱、密码等样式的输入，用于数据交互用；"""import dashimport dash_bootstrap_components as dbcimport dash_html_components as htmlfrom dash.dependencies import Input,Output, Stateapp = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])page = dbc.Container([ dbc.Row([ dbc.Col([ dbc.Input(id='input',placeholder='Type somthing...') ], ) ]), html.P(id='display'), dbc.Row([ dbc.Col([ dbc.Input(placeholder='Large',bs_size='lg'), dbc.Input(placeholder='请输入账号', bs_size='md'), dbc.Input(placeholder='请输入身份证', bs_size='sm'), dbc.FormGroup([ html.H4( dbc.Label('title')), dbc.Input(placeholder='type sth'), dbc.FormText('请输入正确的信息！') ]), dbc.Input(placeholder='请输入数值', bs_size='md',invalid=True), # 表示无效验证， dbc.Input(placeholder='请输入数值', bs_size='md', valid=True), # 表示无效验证， ]) ]), dbc.Row([ dbc.Col([ dbc.Input(placeholder='输入数值A',id='numberA',type='number',valid=True,persistence=True,persistence_type='local'), ]), dbc.Col([ dbc.Input(placeholder='输入数值B', id='numberB',type='number',valid=True,persistence=True,persistence_type='local'), ]), dbc.Col([ dbc.Input(placeholder='求和', id='sum',type='number'), ]) ]), dbc.Row([ dbc.Col([ dbc.Button('求和', id='cal') ]) ]), dbc.Row([ dbc.Col([ dbc.Input(placeholder='求和',disabled=True), dbc.Input(autoFocus=True,type='number',persistence=True,), dbc.Input(type='text',autoFocus=True, autoComplete=True,persistence=True), ]) ]),])app.layout = html.Div([page])@app.callback(Output('display','children'), [Input('input','value')])def show(inputvalue): return inputvalue@app.callback(Output('sum','value'), [Input('numberA','value'), Input('numberB', 'value')])def show(a,b): return a+bif __name__ == "__main__": app.run_server(debug=True, port=8030)注：相关视频教程请参见网易云课堂：https://study.163.com/course/introduction/1209894808.htm?share=2&shareId=480000002204845
欢迎扫码关注微信公众号(云水python)及加入QQ群(995019531)讨论技术细节~
扫一扫
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
