Skip to content

文本输入

文本输入组件用于接收用户文本输入的字段,允许用户输入、编辑文本信息。

属性设置

文本输入支持丰富的属性设置,例如常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

常用设置

属性说明
标签配置是否显示文本输入组件的标签,标签可以为文本输入组件提供文字描述,使用户能够更直观地理解文本输入组件的状态或功能。
标签内容配置文本输入组件的标签内容,支持配置静态内容和动态绑定数据,详情请参见 设置组件内容参数 。
仅打开了文本输入组件的设置开关时,才支持此配置项。默认标签内容为 请输入文本 。
是否必填配置文本输入是否为必填项。
例如在表单填报场景中,当开启“是否必填”开关时,文本输入字段会被标记为必填项。用户在提交表单之前必须输入一些文本,否则表单将不允许提交。
占位文案配置文本输入的占位文案,占位文案是一种提示性文本,它出现在输入字段中但不会显示在最终提交的数据里。
默认为 请输入内容 。
字符上限配置文本输入组件的字符上限,字符上限是一个限制用户在文本输入框中可以输入的最大字符数的功能。默认关闭字符上限,你可以打开开关,并根据实际需求设置字符上限数值。
默认值配置文本输入组件的默认值。
组件布局配置标签与输入框的布局方式,支持上下布局和左右布局。
垂直对齐配置文本输入组件的垂直对齐方式。
范围:顶部对齐、垂直居中对齐、底部对齐。
默认值:顶部对齐。
禁用态可控制文本输入组件在什么情况下展示禁用状态。
表达式的结果为 true:文本输入呈禁用态。
表达式的结果为 false:文本输入呈可用态。
例如,通过一个开关组件来控制此组件是否禁用,可以将表达式设置为 {{Switch1.value}} ,当打开开关组件时, {{Switch1.value}} 为 true ,此组件呈禁用态;当关闭开关组件时, {{Switch1.value}} 为 false ,此组件呈可用态。
加载态可控制文本输入组件在什么情况下展示加载状态。
表达式的结果为 true:文本输入呈加载态。
表达式的结果为 false:文本输入呈可用态。
例如,希望工作流在执行过程中,此组件呈加载状态,则可以在输入框中输入 {{Workflow1.loading}} 。注意, loading 是数据源的一个状态,数据源的 loading 在请求过程中为 true ,在请求未开始或结束时为 false 。

位置设置

文本输入组件提供三种位置类型选项,以灵活配置组件在界面中的位置。

  • 相对定位:堆叠布局下,元素自动向下或向右排列。

  • 绝对定位:页面滚动时,绝对定位的元素会随页面一起滚动。

  • 固定定位:页面滚动时,固定定位的元素会保持固定位置不变。

尺寸设置

属性说明
宽度配置文本输入组件的宽度值,支持以下宽度设置方式:
固定:固定的像素值,不会随容器大小变化。
百分比:元素的宽度占容器宽度的百分比。
填充容器:元素的宽度填满容器的可用空间。
适应内容:元素的宽度会随着内容的大小自动调整。
高度配置文本输入组件的高度值,支持以下高度设置方式:
固定:固定的像素值,不会随容器大小变化。
百分比:元素的高度占容器高度的百分比。
填充容器:元素的高度填满容器的可用空间。
适应内容:元素的高度会随着内容的大小自动调整。
尺寸限制配置文本输入组件的尺寸限制,支持配置最大高度、最小高度、最大宽度、最小宽度。
合理设置尺寸限制参数可以确保组件在不同屏幕尺寸下保持布局的稳定性和一致性,避免因屏幕尺寸差异而导致的布局问题。

样式设置

属性说明
填充配置文本输入组件背景的显示颜色。
圆角配置文本输入组件背景的圆角,支持单独设置四个角的圆角。
内边距配置文本输入组件背景的内边距,可以单独设置四个方向的内边距。
外边距配置文本输入组件背景的外边距,可以单独设置四个方向的外边距。
边框配置文本输入组件背景的边框样式。支持如下设置方式:
预设样式:提供预设的边框样式,可直接使用。
自定义样式:通过边框线的颜色、粗细和样式,自定义边框样式。
阴影配置文本输入组件背景的阴影样式,增强组件的立体感。支持如下设置方式:
预设样式:提供预设的阴影样式,可直接使用。
自定义样式:支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色,自定义阴影样式。
模糊配置文本输入组件的模糊效果,数值越大,模糊效果越明显。支持设置图层模糊和背景模糊。
图层模糊:当前图层内包含的所有元素都将被模糊处理。
背景模糊:支持模糊处理当前组件底部所覆盖部分。

变换设置

丰富界面视觉效果的参数。

属性说明
缩放配置文本输入组件大小的缩放比例。
旋转配置文本输入组件围绕中心点旋转的角度。
位移配置文本输入组件在水平和垂直方向上的移动距离。
倾斜配置文本输入组件在水平和垂直方向上的倾斜角度。

状态设置

控制文本输入组件悬浮态、点击态和出现态的视觉效果参数。

属性说明
悬浮效果配置文本输入组件的悬浮态效果。具体配置说明如下:
样式效果:当鼠标悬浮到文本输入组件上时,文本输入组件的样式变化情况。包括背景色、边框等。详细说明,请参考 样式设置 。
变换效果:当鼠标悬浮到文本输入组件上时,文本输入组件的动态变化情况。包括缩放、旋转等。详细说明,请参考 变换设置 。
过渡效果:设置文本输入组件悬浮态的动画效果。
动画效果:支持设置为缓入缓出、缓入、缓出、线性等动画。
持续时间:设置动画的持续时间,单位为毫秒。
延迟时间:设置动画延迟出现的时间,单位为毫秒。
生效范围:设置动画的生效范围。
应用于全部变化:动画效果将应用于样式设置和变换设置所产生的所有变化。
仅应用于变换效果:动画效果仅应用于变换设置所产生的变化。
点击效果配置文本输入组件的点击态效果。具体配置说明如下:
样式效果:点击文本输入组件时,文本输入组件的样式变化情况。详细说明,请参考 样式设置 。
变换效果:点击文本输入组件时,文本输入组件的动态变化情况。详细说明,请参考 变换设置 。
过渡效果:设置文本输入组件点击态的动画效果。
动画效果:支持设置为缓入缓出、缓入、缓出、线性等动画。
持续时间:设置动画的持续时间,单位为毫秒。
延迟时间:设置动画延迟出现的时间,单位为毫秒。
生效范围:设置动画的生效范围。
应用于全部变化:动画效果将应用于样式设置和变换设置所产生的所有变化。
仅应用于变换效果:动画效果仅应用于变换设置所产生的变化。
出场效果设置文本输入组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入。

可见性设置

控制文本输入组件隐藏或显示的参数,支持在特定条件下隐藏文本输入组件。

  • 设置为 false:显示组件。

  • 设置为 true:隐藏组件。

  • 设置为变量:通过变量值(true 或 false)动态控制文本输入组件的可见性。

  • 例如可以通过开关组件控制文本输入组件的可见性。开关组件 ID 为 Switch 1,当你将文本输入组件的可见性设置为{{ Switch1.value}}后,开关打开时,{{ Switch1.value}}值为 true,文本输入组件将被隐藏。

事件设置

通过配置文本输入组件的事件,可以为文本输入组件添加丰富的交互功能,以增强用户体验和界面的互动性。

事件项说明
事件类型支持以下事件类型:
数据改变时:当输入字段的内容改变时触发。
鼠标失焦时:当元素失去焦点时触发。
鼠标聚焦时:当元素获得焦点时触发。
组件方法支持以下方法:
失焦:使组件失去焦点,通常用于文本输入类组件。
聚焦:将焦点设置到指定的组件,使其成为活动状态。
清除:清除组件的内容,例如文本输入框中的文字。
清除验证:移除组件上的所有验证错误信息。
验证:检查组件的当前值是否符合预设的验证规则。
重置:将组件恢复到初始状态。
设置数据:为组件设置或更新数据。
设置禁用:使组件变为禁用状态,用户无法与之交互。

当前版本实操

本页使用独立的 文本输入 示例页面,页面内不混放其他组件。

  1. 进入低代码应用的 用户界面,确认搭建类型为 桌面网页
  2. 单击画布底部的 新建页面,创建一个空白页面。
  3. 在左侧 组件 面板中找到 文本输入,单击或拖入当前页面。
  4. 切换到 结构 面板,确认该页面只包含当前 文本输入 组件。
  5. 选中组件,在右侧 属性 面板中设置占位文字、默认值、输入限制和内容变化事件。
  6. 检查画布中的实际显示效果,再使用页面顶部的预览入口验证交互。

文本输入 独立页面和属性配置

文本输入 独立页面实际效果