组件：单行输入框

单行输入框组件用于接收用户输入的单行数据，支持设置内容、提示文本、类型、禁用、只读、选中、最大长度、名称、清空等特性，常用于用户名输入、搜索框、单行文本采集等场景。

典型使用场景：

用户登录（用户名、密码输入）
搜索功能（关键词搜索、条件筛选）
信息录入（姓名、电话、邮箱等）
参数设置（配置项、偏好设置）
数据验证（格式检查、实时反馈）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对-align到左(目标组件, 偏移量)、左侧对-align到右(目标组件, 偏移量)、底边对-align到顶(目标组件, 偏移量)、顶边对-align到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置/获取输入内容	`内容`	`单行输入框1.内容 = "张三"`
设置提示文本	`提示文本`	`单行输入框1.提示文本 = "请输入用户名"`
设置输入类型	`类型`	`单行输入框1.类型 = "email"`
设置禁用状态	`禁用`	`单行输入框1.禁用 = 真`
设置只读状态	`只读`	`单行输入框1.只读 = 真`
选中/取消选中	`选中`	`单行输入框1.选中 = 真`
设置最大长度	`最大长度`	`单行输入框1.最大长度 = 20`
设置输入名称	`名称`	`单行输入框1.名称 = "username"`
清空输入内容	`清空()`	`单行输入框1.清空()`
设置内容改变回调	`置内容被改变回调(回调)`	`单行输入框1.置内容被改变回调((源对象, 新内容) => { ... })`

样式美化参考

以下为常用样式组合示例，可根据实际需求调整：

输入框样式变体：

标准输入框：边框圆角 = 6，边框 = "1px solid #d9d9d9"，内边距 = "8px 12px"，背景颜色 = "#ffffff"
圆角输入框：边框圆角 = 20，边框 = "1px solid #d9d9d9"，内边距 = "10px 16px"
下划线输入框：边框 = "none"，边框底边 = "2px solid #d9d9d9"，边框圆角 = 0
阴影输入框：边框圆角 = 6，边框 = "1px solid #d9d9d9"，置内联样式("box-shadow", "0 2px 8px rgba(0,0,0,0.1)")

状态样式：

正常状态：边框 = "1px solid #d9d9d9"
聚焦状态：边框 = "2px solid #1890ff"
错误状态：边框 = "1px solid #ff4d4f"
成功状态：边框 = "1px solid #52c41a"
禁用状态：背景颜色 = "#f5f5f5"，光标样式 = "not-allowed"，透明度 = 0.6
只读状态：背景颜色 = "#fafafa"，光标样式 = "default"

尺寸样式：

大尺寸输入框：宽度 = 400，高度 = 48，字体大小 = 16，内边距 = "12px 16px"
中尺寸输入框：宽度 = 300，高度 = 36，字体大小 = 14，内边距 = "8px 12px"
小尺寸输入框：宽度 = 160，高度 = 28，字体大小 = 12，内边距 = "4px 8px"

特殊类型样式：

密码输入框：类型 = "password"，字体大小 = "14px"
数字输入框：类型 = "number"，内容水平对齐方式 = "right"
搜索输入框：类型 = "search"，置内联样式("background-image", "url('search-icon.png')")
邮箱输入框：类型 = "email"，边框 = "1px solid #d9d9d9"

搜索框样式：

基础搜索：类型 = "search"，提示文本 = "请输入搜索关键词"
带图标搜索：置内联样式("background-image", "url('search-icon.png')")，置内联样式("background-position", "12px center")
搜索按钮组合：宽度 = 200，边框圆角 = "20px"，置内联样式("padding-left", "40px")

验证状态样式：

实时验证：通过 置内容被改变回调 动态改变边框颜色

单行输入框1.置内容被改变回调((源对象, 新内容) => {
  如果(为空(新内容))
      单行输入框1.边框 = "1px solid #ff4d4f"  ' 错误状态
  否则
      单行输入框1.边框 = "1px solid #52c41a"  ' 成功状态
  结束 如果
})

基础示例

简单场景内完整的单行输入框使用演示

' 1. 创建单行输入框
变量 单行输入框1 = 创建 单行输入框()
' 2. 设置属性
单行输入框1.左边 = 100
单行输入框1.顶边 = 100
单行输入框1.宽度 = 300
单行输入框1.高度 = 36
单行输入框1.类型 = "text"
单行输入框1.提示文本 = "请输入用户名"
单行输入框1.最大长度 = 20
单行输入框1.内容 = "张三"
单行输入框1.名称 = "username"
单行输入框1.边框圆角 = "6px"
单行输入框1.边框 = "1px solid #d9d9d9"
单行输入框1.内边距 = "8px 12px"
' 3. 设置事件回调
单行输入框1.置内容被改变回调((源对象, 新内容) => {
    ' 实时验证用户名格式
    变量 长度 = 取文本长度(新内容)
    如果(长度 < 2 或 长度 > 20)
        单行输入框1.边框 = "1px solid #ff4d4f"
        单行输入框1.提示文本 = "用户名长度应在2-20位之间"
    否则
        单行输入框1.边框 = "1px solid #52c41a"
        单行输入框1.提示文本 = "用户名格式正确"
    结束 如果
    
    调试输出("用户名：" + 新内容)
})
' 4. 设置焦点事件
单行输入框1.置被获得焦点回调((源对象, 事件对象) => {
    单行输入框1.边框 = "2px solid #1890ff"
})
单行输入框1.置被失去焦点回调((源对象, 事件对象) => {
    单行输入框1.边框 = "1px solid #d9d9d9"
})
' 5. 添加到父容器
添加组件(单行输入框1)

综合示例：用户登录表单

本示例展示单行输入框在登录表单中的综合应用，包含用户名、密码输入，实时验证，焦点状态管理等功能。

' ========== 创建登录表单容器 ==========
变量 登录容器 = 创建 标签()
登录容器.左边 = 50
登录容器.顶边 = 50
登录容器.宽度 = 400
登录容器.高度 = 300
登录容器.背景颜色 = "#ffffff"
登录容器.边框圆角 = "8px"
登录容器.边框 = "1px solid #e8e8e8"
登录容器.内边距 = "32px"
添加组件(登录容器)

' ========== 创建登录标题 ==========
变量 标题 = 创建 标签()
标题.左边 = 0
标题.顶边 = 0
标题.宽度 = 100%
标题.高度 = 48
标题.文本 = "用户登录"
标题.字体大小 = "24px"
标题.字体粗细 = "粗体"
标题.文本颜色 = "#333333"
标题.内容水平对齐方式 = "center"
添加组件(标题)

' ========== 创建用户名输入框 ==========
变量 输入框_用户名 = 创建 单行输入框()
输入框_用户名.左边 = 0
输入框_用户名.顶边 = 60
输入框_用户名.宽度 = 100%
输入框_用户名.高度 = 44
输入框_用户名.类型 = "text"
输入框_用户名.提示文本 = "请输入用户名"
输入框_用户名.最大长度 = 20
输入框_用户名.边框圆角 = "6px"
输入框_用户名.边框 = "1px solid #d9d9d9"
输入框_用户名.内边距 = "0 12px"
输入框_用户名.置内容被改变回调((源对象, 新内容) => {
    ' 用户名验证
    变量 长度 = 取文本长度(新内容)
    如果(长度 < 2 或 长度 > 20)
        输入框_用户名.边框 = "1px solid #ff4d4f"
    否则
        输入框_用户名.边框 = "1px solid #d9d9d9"
    结束 如果
})
输入框_用户名.置被获得焦点回调((源对象, 事件对象) => {
    输入框_用户名.边框 = "2px solid #1890ff"
})
输入框_用户名.置被失去焦点回调((源对象, 事件对象) => {
    输入框_用户名.边框 = "1px solid #d9d9d9"
})
添加组件(输入框_用户名)

' ========== 创建密码输入框 ==========
变量 输入框_密码 = 创建 单行输入框()
输入框_密码.左边 = 0
输入框_密码.顶边 = 116
输入框_密码.宽度 = 100%
输入框_密码.高度 = 44
输入框_密码.类型 = "password"
输入框_密码.提示文本 = "请输入密码"
输入框_密码.最大长度 = 20
输入框_密码.边框圆角 = "6px"
输入框_密码.边框 = "1px solid #d9d9d9"
输入框_密码.内边距 = "0 12px"
输入框_密码.置内容被改变回调((源对象, 新内容) => {
    ' 密码强度检测
    变量 长度 = 取文本长度(新内容)
    如果(长度 < 6)
        输入框_密码.边框 = "1px solid #ff4d4f"
    否则 如果(长度 >= 8)
        输入框_密码.边框 = "1px solid #52c41a"
    否则
        输入框_密码.边框 = "1px solid #faad14"
    结束 如果
})
输入框_密码.置被获得焦点回调((源对象, 事件对象) => {
    输入框_密码.边框 = "2px solid #1890ff"
})
输入框_密码.置被失去焦点回调((源对象, 事件对象) => {
    输入框_密码.边框 = "1px solid #d9d9d9"
})
添加组件(输入框_密码)

' ========== 创建记住密码复选框 ==========
变量 复选框_记住 = 创建 标签()
复选框_记住.左边 = 0
复选框_记住.顶边 = 172
复选框_记住.宽度 = 200
复选框_记住.高度 = 24
复选框_记住.文本 = "记住密码"
复选框_记住.字体大小 = "14px"
复选框_记住.文本颜色 = "#666666"
添加组件(复选框_记住)

' ========== 创建登录按钮 ==========
变量 按钮_登录 = 创建 按钮()
按钮_登录.左边 = 0
按钮_登录.顶边 = 208
按钮_登录.宽度 = 100%
按钮_登录.高度 = 44
按钮_登录.文本 = "登录"
按钮_登录.背景颜色 = "#1890ff"
按钮_登录.文本颜色 = "#ffffff"
按钮_登录.边框圆角 = "6px"
按钮_登录.字体大小 = "16px"
按钮_登录.置被单击回调((源对象, 事件对象) => {
    ' 验证输入
    如果(输入框_用户名.内容 == "" 或 输入框_密码.内容 == "")
        弹出提示("请输入用户名和密码")
        返回
    结束 如果
    
    ' 模拟登录
    按钮_登录.禁用 = 真
    按钮_登录.文本 = "登录中..."
    
    延时执行(() => {
        按钮_登录.禁用 = 假
        按钮_登录.文本 = "登录"
        
        如果(输入框_用户名.内容 == "admin" 且 输入框_密码.内容 == "123456")
            弹出提示("登录成功！")
            ' 这里可以添加页面跳转逻辑
        否则
            弹出提示("用户名或密码错误")
        结束 如果
    }, 1500)
})
添加组件(按钮_登录)

' ========== 创建忘记密码链接 ==========
变量 链接_忘记 = 创建 超链接()
链接_忘记.左边 = 0
链接_忘记.顶边 = 264
链接_忘记.宽度 = 100%
链接_忘记.高度 = 24
链接_忘记.文本 = "忘记密码？"
链接_忘记.文本颜色 = "#1890ff"
链接_忘记.字体大小 = "14px"
链接_忘记.内容水平对齐方式 = "right"
链接_忘记.置被单击回调((源对象, 事件对象) => {
    弹出提示("跳转到密码重置页面")
})
添加组件(链接_忘记)

属性：内容

类型： 文本型
说明： 设置或获取当前输入框中的文本内容。

属性：提示文本

类型： 文本型
说明： 设置或获取当前输入框的提示文本，当输入框为空时显示。

属性：类型

类型： 文本型
说明： 设置或获取当前输入框接收输入的类型，支持：
- text：普通文本输入（默认）
- password：密码输入（显示为圆点）
- email：邮箱输入
- tel：电话号码输入
- number：数字输入
- search：搜索输入框
- url：URL地址输入
- date：日期选择
- time：时间选择

属性：禁用

类型： 逻辑型
说明： 设置或获取当前输入框是否禁用，禁用后用户无法输入。

属性：只读

类型： 逻辑型
说明： 设置或获取当前输入框是否为只读状态，只读状态下用户无法修改内容但可以查看。

属性：选中

类型： 逻辑型
说明： 设置或获取当前输入框是否被选中（高亮显示）。

属性：最大长度

类型： 数值型
说明： 设置或获取当前输入框允许输入的最大字符数。

属性：名称

类型： 文本型
说明： 设置或获取当前输入框的名称，用于表单提交时标识数据。

函数：清空()

清空当前输入框中的文本内容。

示例：

' 清空输入框
单行输入框1.清空()

函数：置内容被改变回调(回调函数)

设置当输入框内容被改变时的回调函数，回调函数返回两个参数：(事件对象, 新内容)

回调函数格式：

单行输入框1.置内容被改变回调((源对象, 新内容) => {
    ' 处理内容变化
    调试输出("新内容：" + 新内容)
})

事件：内容被改变(源对象,新内容)

当输入框内容被改变时触发并回调该事件。

事件处理示例：

事件 单行输入框1.内容被改变(源对象, 新内容)
    调试输出("内容变为：" + 新内容)
结束 事件

⚠️ 注意事项

输入验证：建议在 置内容被改变回调 中添加实时验证逻辑，提升用户体验。
类型限制：不同输入类型有不同的验证规则，如 email 会自动验证邮箱格式。
性能优化：避免在回调中执行耗时操作，特别是频繁触发的内容变化事件。
移动端适配：移动端设备上，不同输入类型会显示不同的键盘布局，需考虑用户体验。
无障碍访问：建议为输入框添加适当的 aria-label 属性，提升可访问性。

轻语言网站开发SDK文档