syncfusion-maui-toolkit-otp-input

.NET MAUI OTP 输入框（SfOtpInput）技能

OTP 输入框 是一种专用用户界面组件，用于在身份验证工作流中收集一次性密码（OTP）。本技能全面介绍如何在 .NET MAUI 应用中实现 OTP 输入框控件，包括正确的配置、样式设置、事件处理和验证。

何时使用此技能

在以下情况下使用此技能：

• 构建身份验证流程 — 实现基于短信或电子邮件的 OTP 验证系统
• 创建多步骤验证 — 开发需要一次性密码的安全登录流程
• 设计密码重置流程 — 通过 OTP 确认构建安全的账户恢复流程
• 实现账户安全功能 — 添加带时限验证码的双重身份验证（2FA）
• 收集结构化的数字/字母数字输入 — 使用 OTP 输入框录入任意固定长度的代码
• 自定义输入外观 — 应用不同的样式模式（Outlined、Filled、Underlined），以匹配应用设计
• 处理输入验证 — 对 OTP 代码进行实时验证并检测输入是否完成
• 支持无障碍访问 — 确保兼容键盘导航和屏幕阅读器

触发此技能的关键词： OTP、一次性密码、身份验证、验证码、短信验证、电子邮件验证、2FA、双重身份验证、OtpInput、SfOtpInput、安全验证、代码录入、手机验证、MAUI 输入

组件概述

主要功能：

• 输入类型 — Number（仅数字）、Text（字母数字）、Password（隐藏）模式
• 样式模式 — Outlined（带边框）、Filled（背景填充）、Underlined（仅下划线）外观
• 可配置长度 — 设置输入框的数量（例如，4 位或 6 位代码）
• 分隔符支持 — 在输入框之间添加视觉分隔符，提升清晰度
• 值绑定 — 以编程方式获取和设置 OTP 值
• 事件处理 — 使用 ValueChanged 事件实时监控并验证输入
• 无障碍访问 — 支持键盘导航和屏幕阅读器，打造包容性设计

文档与导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装和 NuGet 包设置
• 在 MauiProgram.cs 中注册处理程序
• 基本的 OTP 输入框实现
• 设置初始值和输入框数量
• XAML 和 C# 实现模式

输入类型

📄 阅读： references/input-types.md

• Number 类型（默认，仅限数字的代码）
• Text 类型（字母数字 OTP 代码）
• Password 类型（隐藏/掩码输入，保护隐私）
• 根据使用场景选择合适的类型
• 类型转换和切换行为

样式模式

📄 阅读： references/styling-modes.md

• Outlined 模式（带边框的输入框）
• Filled 模式（背景填充的输入框）
• Underlined 模式（仅带下划线的输入框）
• 样式模式选择指南
• 外观对比

功能与配置

📄 阅读： references/features-and-configuration.md

• Length 属性（输入框数量）
• 分隔符配置（视觉间距）
• 值的获取与绑定
• 禁用状态处理
• 焦点与光标管理
• 多平台注意事项

事件与验证

📄 阅读： references/events-and-validation.md

• ValueChanged 事件处理和事件参数
• 实时输入验证模式
• OTP 完成检测
• 错误处理和恢复
• 输入清理最佳实践
• 性能优化技巧