ILLA home page
  1. Input

文本输入组件是一个用户界面元素,允许用户输入和编辑表单或输入字段的文本。

属性

属性描述
默认值组件的初始值。 您可以在 {{}} 中输入JavaScript 动态更改初始值。
占位符当输入字段为空时,值将显示。
标签显示给用户的字段名称
标题详细描述字段的标题
隐藏标签设置是否显示标签
位置设置标签相对于组件的位置
对齐设置标签的对齐(对齐到左或右)
Width当标签位于组件左侧时,设置标签的宽度。
事件处理程序响应组件事件触发查询、控制组件或调用其他API。
已禁用控制组件是否被禁用的状态。 当组件被禁用时,它不能被修改或聚焦。
只读控制组件是否为只读状态. 一个只读组件可以被选择和集中,但不能被修改。
显示清除按钮控制是否在输入字段中显示清除按钮
显示字符数控制是否显示输入的字符计数
前缀文本输入字段左边出现的短文本,常用来为用户提供额外的上下文或指令
后缀文本输入字段右边的短文本,常用来向用户提供额外信息或反馈
工具提示用户可以在此输入组件工具提示。 工具提示将在其焦点时显示。 支持Markdown 格式。
必填字段只有当开启开关时才有效。
图案指定用户输入必须匹配的正则表达式模式才能被认为有效
最大长度设置可以输入输入字段的最大字符数。
最小长度指定用户必须输入输入输入字段才能被视为有效的字符的最少数。
自定义规则在此创建您的验证逻辑。 规则应该在 JavaScript 中制定,并且由 {{}} 涵盖。
隐藏验证消息当输入值不正确时,您可以通过切换隐藏状态来隐藏错误消息。 您可以用JavaScript动态地更改隐藏状态。
表单数据键在构建数据属性时指定包装表单组件的键值。
Hidden动态控制组件是否隐藏。 您可以通过动态布尔值更改隐藏状态。
主题颜色允许用户指定按钮的背景颜色和不透明度

方法

您可以使用其他组件来控制组件。 我们支持以下两种方法:

  • setValue

要设置输入值,例如 {{‘value1’}}

属性描述
Input value
  • clearValue

清除选中组件的值

  • focus

当调用焦点方法时, 输入字段将被高亮显示并准备好用户开始键入,而不需要用户点击输入字段。

示例用法:

输入组件支持使用内置事件系统监听其他组件的onChange事件。 通过跟随这些示例步骤设置它:

  1. 将事件触发器添加到您想要听到的组件中。 例如,如果你想要聆听无线电组组件的 onChange` 事件的话。 您将向无线电组组件添加一个事件处理程序。
  2. 在编辑事件处理器中,选择 `Control component 在动作中,选择你想要更新的 Input 组件作为事件的目标。
  3. 选择 SetValue 动作并选择输入组件的适当值。 这将是输入组件的值,并将在事件触发时更新。
  4. 保存事件触发器设置并重复您想要听到的任何其他组件的过程。

一旦您设置了事件触发器,在其他组件触发onChange”事件时,输入组件将自动更新。 这允许您创建实时响应用户输入的动态接口 让用户更容易浏览和与您的应用程序交互。

事件处理程序

事件描述
更改当用户更改选中的输入值
聚焦点当用户在输入组件上移动鼠标光标
Blur当用户完成输入值并退出关注连铸组件时

数据

组件有一些常用的数据,可以通过应用程序中的 {{componentName.propertyName}} 调用。

属性名称描述
用户输入值
颜色方案按钮的背景颜色
已禁用一个布尔值表示禁用状态
显示名称此组件的名称 (e 按钮1)
formDataKey输入的表格数据键
hidden隐藏状态 (true 或 false)
标签标签值
标签对齐输入标签对齐(左或右)
标签位置输入标签的位置(左或右)
标签宽度代表标签宽度的整数。
最大长度最大长度的值
最小长度最小长度的值
占位符占位符值
prefixText文本前缀的值
后缀文本文本后缀的值
只读一个布尔值表示输入的准备状态。
必填一个布尔值表示输入的必填状态。
正则表达式输入的正则表达式
显示字符数一个布尔值表示输入的字符数是否显示
工具提示文本工具提示文本的值

示例: {{input1.value}}

使用大小写

下面是一些自定义输入组件的示例。

  • 前缀:

input_prefix

  • 后缀:

input_suffix

  • 工具提示:

input_tooltip

  • 模式:

input_pattern