组件：密码输入框

密码输入框组件用于安全的密码输入，输入内容默认以圆点或星号掩码显示，防止窥屏。支持设置占位提示、最大长度、禁用状态、明文/密文切换以及输入值改变回调。适用于用户登录、密码修改、安全验证等需要保护密码信息的场景。

典型使用场景：

用户登录（账号密码输入）
密码修改/重置（旧密码、新密码、确认密码）
安全验证（支付密码、交易密码）
表单中的敏感信息输入（身份证号、密钥）

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

操作	属性/方法	示例
设置密码内容	`值`	`密码输入框1.值 = "123456"`
设置占位提示文本	`占位提示`	`密码输入框1.占位提示 = "请输入密码"`
设置最大输入长度	`最大长度`	`密码输入框1.最大长度 = 20`
禁用/启用输入框	`禁用`	`密码输入框1.禁用 = 真`
切换密码可见性	`置可见(是否可见)`	`密码输入框1.置可见(真)`
获取当前密码值	`取值()`	`变量密码 = 密码输入框1.取值()`
清空密码输入	`清空()`	`密码输入框1.清空()`
设置值改变回调	`置输入被改变回调(回调函数)`	`密码输入框1.置输入被改变回调((源对象, 值) => { ... })`

样式美化参考

密码输入框的外观可通过继承的视图属性进行调整：

整体容器：通过 宽度、高度、背景颜色、边框（如 "1px solid #d9d9d9"）、边框圆角（建议 "6px"）等属性美化。
字体样式：通过 字体大小（建议 "14px"）、文本颜色 控制输入文字外观。
内边距：使用 内边距（如 "8px 12px"）控制输入框内边距。
占位提示样式：占位文本的颜色由浏览器默认控制，可通过 CSS 伪类 ::placeholder 自定义。
禁用状态：禁用 = 真 时，输入框变灰且不可交互。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-password-input {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    transition: border-color 0.3s;
}
.my-password-input:focus {
    border-color: #1890ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.my-password-input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}
.my-password-input::placeholder {
    color: #bfbfbf;
}

在代码中应用样式类：密码输入框1.添加样式类("my-password-input")

基础示例

创建一个简单的密码输入框，包含占位提示和最大长度限制。

变量 密码输入框1 = 创建 密码输入框()
密码输入框1.左边 = 50
密码输入框1.顶边 = 50
密码输入框1.宽度 = 300
密码输入框1.高度 = 36
密码输入框1.边框 = "1px solid #d9d9d9"
密码输入框1.边框圆角 = "6px"
密码输入框1.内边距 = "8px 12px"
密码输入框1.字体大小 = "14px"
密码输入框1.占位提示 = "请输入密码"
密码输入框1.最大长度 = 20
添加组件(密码输入框1)

综合示例：用户登录表单

本示例构建一个完整的登录表单，包含用户名、密码输入框，密码可见性切换功能，以及登录校验逻辑。

' ========== 创建表单容器 ==========
变量 表单容器 = 创建 绝对布局()
表单容器.左边 = 50
表单容器.顶边 = 30
表单容器.宽度 = 320
表单容器.背景颜色 = "#ffffff"
表单容器.边框 = "1px solid #e8e8e8"
表单容器.边框圆角 = "12px"
表单容器.内边距 = "24px"
添加组件(表单容器)

' 标题
变量 标题 = 创建 标签()
标题.文本 = "🔐 用户登录"
标题.字体大小 = "20px"
标题.字体粗细 = "bold"
标题.文本颜色 = "#333"
标题.内边距 = "0 0 16px 0"
表单容器.添加组件(标题)

' 用户名输入框
变量 用户标签 = 创建 标签()
用户标签.文本 = "用户名"
用户标签.字体大小 = "14px"
用户标签.文本颜色 = "#666"
用户标签.内边距 = "8px 0 4px"
表单容器.添加组件(用户标签)

变量 用户名输入 = 创建 单行输入框()
用户名输入.宽度 = 272
用户名输入.高度 = 36
用户名输入.提示文本 = "请输入用户名"
用户名输入.边框 = "1px solid #d9d9d9"
用户名输入.边框圆角 = "6px"
用户名输入.内边距 = "8px 12px"
用户名输入.字体大小 = "14px"
表单容器.添加组件(用户名输入)

' 密码输入框
变量 密码标签 = 创建 标签()
密码标签.文本 = "密码"
密码标签.字体大小 = "14px"
密码标签.文本颜色 = "#666"
密码标签.内边距 = "12px 0 4px"
表单容器.添加组件(密码标签)

变量 密码输入 = 创建 密码输入框()
密码输入.宽度 = 272
密码输入.高度 = 36
密码输入.占位提示 = "请输入密码"
密码输入.边框 = "1px solid #d9d9d9"
密码输入.边框圆角 = "6px"
密码输入.内边距 = "8px 12px"
密码输入.字体大小 = "14px"
密码输入.最大长度 = 20
表单容器.添加组件(密码输入)

' 显示密码切换按钮
变量 显示密码按钮 = 创建 按钮()
显示密码按钮.文本 = "👁"
显示密码按钮.宽度 = 32
显示密码按钮.高度 = 32
显示密码按钮.背景颜色 = "transparent"
显示密码按钮.边框 = "none"
显示密码按钮.字体大小 = "18px"
显示密码按钮.光标样式 = "pointer"
' 由于绝对布局，需要定位到密码输入框右侧
显示密码按钮.左边 = 286
显示密码按钮.顶边 = 190  ' 需要根据实际布局调整，此处简化
表单容器.添加组件(显示密码按钮)

' 登录按钮
变量 登录按钮 = 创建 按钮()
登录按钮.文本 = "登 录"
登录按钮.宽度 = 272
登录按钮.高度 = 44
登录按钮.背景颜色 = "#1890ff"
登录按钮.文本颜色 = "#ffffff"
登录按钮.边框圆角 = "6px"
登录按钮.字体大小 = "16px"
登录按钮.内边距 = "16px 0 0"
表单容器.添加组件(登录按钮)

' 错误提示标签
变量 错误提示 = 创建 标签()
错误提示.文本 = ""
错误提示.字体大小 = "14px"
错误提示.文本颜色 = "#ff4d4f"
错误提示.内边距 = "8px 0 0"
错误提示.可视 = "hidden"
表单容器.添加组件(错误提示)

' ========== 切换密码可见性 ==========
变量 密码可见 = 假
显示密码按钮.置被单击回调((源对象, 事件对象) => {
    密码可见 = !密码可见
    密码输入.置可见(密码可见)
    显示密码按钮.文本 = 密码可见 ? "🙈" : "👁"
})

' ========== 登录校验 ==========
登录按钮.置被单击回调((源对象, 事件对象) => {
    变量 用户名 = 删首尾空(用户名输入.内容)
    变量 密码 = 删首尾空(密码输入.取值())
    
    ' 校验
    如果(用户名 == "")
        错误提示.文本 = "请输入用户名"
        错误提示.可视 = "visible"
        用户名输入.获取焦点()
        返回
    结束 如果
    如果(密码 == "")
        错误提示.文本 = "请输入密码"
        错误提示.可视 = "visible"
        密码输入.获取焦点()
        返回
    结束 如果
    
    错误提示.可视 = "hidden"
    登录按钮.禁用 = 真
    登录按钮.文本 = "登录中..."
    
    ' 模拟登录请求
    延时执行(() => {
        登录按钮.禁用 = 假
        登录按钮.文本 = "登 录"
        如果(用户名 == "admin" 且 密码 == "123456")
            弹出提示("登录成功")
            切换页面("首页")
        否则
            错误提示.文本 = "用户名或密码错误"
            错误提示.可视 = "visible"
        结束 如果
    }, 1000)
})

' ========== 回车快速登录 ==========
密码输入.置键盘被按下回调((源对象, 事件对象) => {
    如果(事件对象.keyCode == 13)  ' 回车键
        登录按钮.执行单击()
    结束 如果
})

属性详解

值

类型： 文本型
说明： 设置或获取当前密码输入框中的文本内容。设置后，内容会以掩码形式显示（如圆点或星号）。

占位提示

类型： 文本型
说明： 设置或获取输入框为空时显示的占位提示文本，通常用于提示用户输入格式。当输入框获得焦点或开始输入后，占位文本消失。

禁用

类型： 逻辑型
说明： 设置或获取是否禁用输入框。禁用后，用户无法输入内容，样式变灰。默认为 假。

最大长度

类型： 数值型
说明： 设置或获取输入框允许输入的最大字符数。当输入达到最大长度后，无法再输入更多字符。默认为无限制。

函数详解

置可见(是否可见)

功能： 切换密码的明文/密文显示。当 是否可见 = 真 时，密码明文显示；当为 假 时，密码以掩码显示。
参数： 是否可见（逻辑型）。
返回值： 无。
示例： 密码输入框1.置可见(真) 显示明文密码

取值()

功能： 获取当前密码输入框中的实际文本内容（无论当前是否可见）。
返回值： 文本型，当前输入框中的密码字符串。
示例： 变量密码 = 密码输入框1.取值()

清空()

功能： 清空密码输入框中的所有内容。
返回值： 无。
示例： 密码输入框1.清空()

置输入被改变回调(回调函数)

功能： 设置当密码输入框内容发生变化时的回调函数。
参数： 回调函数，格式为 (源对象, 当前值) => { ... }。
- 源对象：触发事件的密码输入框组件本身。
- 当前值：变化后的密码值（文本型）。
返回值： 无。

示例：

密码输入框1.置输入被改变回调((源对象, 当前值) => {
    调试输出("密码已变更，当前长度：" + 取文本长度(当前值))
})

事件说明

输入被改变(源对象, 当前值)

功能： 与 置输入被改变回调 等效，适用于设计文件（.spldg）中定义的组件。