组件:编辑框

编辑框组件用于接收用户输入的多行文本内容,是轻语言中常用的文本输入组件之一。支持设置内容、提示文本、置内容被改变回调、追加文本、追加文本行等特性,常用于意见反馈、备注说明、长文本输入、文章编辑等多行编辑场景。

典型使用场景:

  • 意见反馈(用户留言、投诉建议)
  • 备注说明(订单备注、商品描述)
  • 长文本输入(文章内容、产品介绍)
  • 评论/回复内容输入(用户评论、回复)
  • 文章编辑(用户编辑文章内容)

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

操作属性/方法示例
设置/获取编辑框内容内容编辑框1.内容 = "新内容"
设置提示占位文本提示文本编辑框1.提示文本 = "请输入备注"
尾部追加文本追加文本(内容)编辑框1.追加文本("新内容")
尾部追加一行追加文本行(内容)编辑框1.追加文本行("新行")
设置内容改变回调置内容被改变回调(回调)编辑框1.置内容被改变回调((源对象, 新内容) => { ... })

样式美化参考

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

编辑框样式变体:

  • 默认风格:边框圆角 = 6边框 = "1px solid #d9d9d9"内边距 = "8px 12px"
  • 圆角风格:边框圆角 = 20边框 = "1px solid #d9d9d9"内边距 = "10px 16px"
  • 无边框风格:边框 = "none"背景颜色 = "#f5f5f5"边框圆角 = 6
  • 下划线风格:边框 = "none"边框底边 = "2px solid #d9d9d9"边框圆角 = 0
  • 阴影风格:边框圆角 = 6边框 = "1px solid #d9d9d9"置内联样式("box-shadow", "0 2px 8px rgba(0,0,0,0.1)")
  • 大尺寸编辑框:宽度 = 400高度 = 200字体大小 = 16内边距 = "12px 16px"
  • 小尺寸编辑框:宽度 = 160高度 = 32字体大小 = 12内边距 = "4px 8px"

编辑框状态样式:

  • 聚焦效果:通过 置被获得焦点回调 动态修改 边框 = "2px solid #1890ff"
    编辑框1.置被获得焦点回调((源对象, 事件对象) => {
        编辑框1.边框 = "2px solid #1890ff"
    })
    
  • 只读状态:禁用 = 真背景颜色 = "#f5f5f5"光标样式 = "default"
  • 内容统计:通过 置内容被改变回调 实时统计字符数并更新标签文本,例如:
    编辑框1.置内容被改变回调((源对象, 新内容) => {
        标签_统计.文本 = "已输入 " + 新内容.长度 + " 个字符"
    })
    
  • 自动高度:通过 置内容被改变回调 动态设置 高度 = "auto"
    编辑框1.置内容被改变回调((源对象, 新内容) => {
        编辑框1.高度 = "auto"
    })
    

基础示例

' 1. 创建编辑框
变量 编辑框1 = 创建 编辑框()

' 2. 设置属性
编辑框1.左边 = 100
编辑框1.顶边 = 100
编辑框1.宽度 = 300
编辑框1.高度 = 120
编辑框1.提示文本 = "请输入内容"
编辑框1.内容 = "默认文本"

' 3. 设置事件回调
编辑框1.置内容被改变回调((源对象, 新内容) => {
    调试输出("新内容:" + 新内容)
})

' 4. 添加到父容器
添加组件(编辑框1)

综合示例:意见反馈表单

本示例展示编辑框与标签、按钮配合使用的完整意见反馈场景,所有组件均在代码中创建,不依赖外部 XML 定义。

' ========== 创建标题标签 ==========
变量 标签_标题 = 创建 标签()
标签_标题.左边 = 20
标签_标题.顶边 = 20
标签_标题.宽度 = 300
标签_标题.高度 = 36
标签_标题.文本 = "📝 意见反馈"
标签_标题.字体大小 = "20px"
标签_标题.字体粗细 = "粗体"
添加组件(标签_标题)

' ========== 创建提示标签 ==========
变量 标签_提示 = 创建 标签()
标签_提示.左边 = 20
标签_提示.顶边 = 65
标签_提示.宽度 = 300
标签_提示.高度 = 24
标签_提示.文本 = "请详细描述您的意见或建议:"
标签_提示.文本颜色 = "#666666"
标签_提示.字体大小 = "14px"
添加组件(标签_提示)

' ========== 创建意见内容编辑框 ==========
变量 编辑框_意见 = 创建 编辑框()
编辑框_意见.左边 = 20
编辑框_意见.顶边 = 95
编辑框_意见.宽度 = 350
编辑框_意见.高度 = 150
编辑框_意见.提示文本 = "请输入您的意见或建议..."
编辑框_意见.边框圆角 = "6px"
编辑框_意见.边框 = "1px solid #ddd"
添加组件(编辑框_意见)

' ========== 创建字符统计标签 ==========
变量 标签_统计 = 创建 标签()
标签_统计.左边 = 20
标签_统计.顶边 = 255
标签_统计.宽度 = 200
标签_统计.高度 = 24
标签_统计.文本 = "已输入 0 字符"
标签_统计.文本颜色 = "#999999"
标签_统计.字体大小 = "12px"
添加组件(标签_统计)

' ========== 创建提交按钮 ==========
变量 按钮_提交 = 创建 按钮()
按钮_提交.左边 = 280
按钮_提交.顶边 = 250
按钮_提交.宽度 = 90
按钮_提交.高度 = 36
按钮_提交.文本 = "提交反馈"
按钮_提交.背景颜色 = "#1890ff"
按钮_提交.文本颜色 = "#ffffff"
按钮_提交.边框圆角 = "6px"
按钮_提交.字体大小 = "16px"
添加组件(按钮_提交)

' ========== 内容改变事件 ==========
编辑框_意见.置内容被改变回调((源对象, 新内容) => {
    ' 更新字符统计
    变量 长度 = 取文本长度(新内容)
    标签_统计.文本 = "已输入 " + 长度 + " 字符"
})

' ========== 提交按钮点击事件 ==========
按钮_提交.置被单击回调((源对象, 事件对象) => {
    变量 意见内容 = 编辑框_意见.内容

    如果(意见内容 == "" 或 删首尾空(意见内容) == "")
        弹出提示("请先输入意见内容!")
        返回
    结束 如果

    按钮_提交.禁用 = 真
    按钮_提交.文本 = "提交中..."

    ' 模拟提交(实际开发中替换为请求接口)
    延时执行(() => {
        按钮_提交.禁用 = 假
        按钮_提交.文本 = "提交反馈"
        弹出提示("✅ 意见提交成功,感谢您的反馈!")
        编辑框_意见.内容 = ""
        标签_统计.文本 = "已输入 0 字符"
    }, 1500)
})

属性:内容

  • 类型: 文本型
  • 说明: 设置或获取当前编辑框的内容。

属性:提示文本

  • 类型: 文本型
  • 说明: 设置或获取当前编辑框的提示文本。

函数:追加文本(内容)

在编辑框内容的尾部追加一段文本内容。

函数:追加文本行(内容)

在编辑框的内容尾部追加一行内容;换行符在追加的文本后面。

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

功能: 设置当编辑框内容被改变时的回调函数。每当用户输入、删除或粘贴文本时,系统会自动调用传入的回调函数。

参数:

  • 回调函数:拉姆达表达式,格式为 (源对象, 新内容) => { 代码体 }
    • 源对象:触发事件的编辑框组件本身
    • 新内容:当前编辑框中的完整文本内容

返回值:

示例:

编辑框1.置内容被改变回调((源对象, 新内容) => {
    调试输出("内容变为:" + 新内容)
})

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

功能: 当编辑框内容被改变时触发并回调该事件。

参数:

  • 源对象:触发事件的编辑框组件本身
  • 新内容:当前编辑框中的完整文本内容

示例:

仅支持 .spldg 文件中定义的组件通过事件语句使用(VB6风格):

事件 编辑框1.内容被改变(源对象, 新内容)
    调试输出("内容变为:" + 新内容)
结束 事件

⚠️ 注意事项

  1. 多行文本:编辑框支持多行文本输入,按回车键可换行。
  2. 内容长度:编辑框没有内置的最大长度限制,如需限制可使用 取文本长度(编辑框1.内容) 自行校验。
  3. 提示文本提示文本 仅在编辑框为空且未获得焦点时显示,输入内容后会消失。
  4. 事件回调置内容被改变回调 在每次内容变化时都会触发(包括输入、删除、粘贴等操作),回调中应避免执行耗时操作。
  5. 追加文本追加文本行 会在文本末尾自动添加换行符(\n),适合批量添加多行内容。

相关文档

  • 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
  • 文档文本类组件_标签 —— 与编辑框配合使用的标签组件
  • 文档文本类组件_按钮 —— 与编辑框配合使用的按钮组件
  • 文档轻语言网站:轻语言语法速查 —— 拉姆达表达式语法规则
  • 文档综合演示:意见反馈表单 —— 完整反馈表单示例