COMPONENT 25 · Text & File Inputs

格式化输入框

Masked Input

也叫Input MaskFormatted Field掩码输入格式输入框

按固定格式引导并格式化电话号码、卡号等输入。

Guides and formats input that follows a fixed pattern such as a phone or card number.

ANATOMY & USAGE

结构与使用建议

组成部分

格式提示
文本输入
校验反馈

适合使用

输入值具有稳定、用户熟悉的格式时。

不建议使用

格式因地区变化大或遮罩会妨碍粘贴时。

键盘与无障碍

允许粘贴和删除；屏幕阅读器获得完整格式说明，视觉分隔符不应成为真实值。

DESCRIBE IT TO AI

这样告诉编程助手

实现格式化输入框（Masked Input）：按固定格式引导并格式化电话号码、卡号等输入。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<label class="demo stack" for="phone">
  <span>手机号（按 3-4-4 位输入）</span>
  <input id="phone" inputmode="numeric" autocomplete="tel" placeholder="138 0000 0000">
</label>