简介

fs-form-input 是表单项内容控件，可独立使用或配合 fs-form 使用。支持单行文本、多行文本、数字、电话号码、密码等多种输入类型。在 Hera 安卓环境下，number 类型会自动使用 tel 类型以提供更好的用户体验。

使用方法

局部引入时，在页面的 index.json 中配置：

"usingComponents": {
  "fs-form-input": "/avaui-sub/fs-form/fs-form-input/index"
}

配合 fs-form 使用时：

"usingComponents": {
  "fs-form": "/avaui-sub/fs-form/index",
  "fs-form-item": "/avaui-sub/fs-form/fs-form-item/index",
  "fs-form-input": "/avaui-sub/fs-form/fs-form-input/index"
}

PWC（自定义组件/插件）使用：仅 usingComponents 注册方式使用 avaComponent:// 协议，其他用法一致。

单独使用时：

"usingComponents": {
  "fs-form-input": "avaComponent://avaui-sub/fs-form/fs-form-input/index"
}

代码演示

1. 基础用法

支持单行文本输入，通过 value 绑定值，通过 change 事件监听值变化。可通过 bordered 属性添加圆角边框。

2. 输入类型（type 属性）

支持多种输入类型：text（单行文本）、textarea（多行文本）、number（数字）、tel（电话）、password（密码）。

3. 禁用状态

通过 disabled 属性禁用输入框。

4. 配合 fs-form 使用

fs-form-input 可以作为 fs-form-item 的内容控件，支持表单校验和数据收集。

---

API

fs-form-input 属性

参数	说明	类型	可选值	默认值
value	输入框的值	String	—	''
placeholder	占位提示文字	String	—	''
type	输入框类型	String	text / textarea / number / tel / password	text
disabled	是否禁用	Boolean	—	false
maxlength	最大输入长度，-1 为不限制	Number	—	-1
bordered	是否显示边框	Boolean	—	false

fs-form-input 事件

事件名	说明	回调参数
change	输入值变化时触发（用于fs-form 更新及校验）
input	输入值变化时触发（透传原生input事件）
focus	获得焦点时触发
blur	失去焦点时触发

注意： change 和 blur 事件开启了 bubbles: true 和 composed: true，可被 fs-form-item 捕获用于表单校验。

---

设计说明

• 输入框样式与设计规范保持一致，支持 CSS 变量自定义颜色。
• type 为 number 时，会自动过滤非数字字符，仅保留数字、小数点和负号。
• 在 Hera 安卓环境下，number 类型会自动转换为 tel 类型以提供更好的键盘体验。
• textarea 类型支持自动高度调整。
• 禁用状态下文本颜色自动变为禁用态颜色。
• 开启 bordered 属性后输入框显示圆角边框，适用于需要视觉区分的卡片风格场景。

---

打开预览