chunking-numeric-and-otp

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chunking applied to numeric strings

Chunking在数字字符串中的应用

Numbers are the canonical chunking case. A 10-digit phone number, a 16-digit credit card, a 6-digit OTP — without chunking, these are working-memory overloads. With chunking, they're manageable.

数字是最典型的分块应用场景。一个10位的电话号码、16位的信用卡号、6位的OTP——如果不分块，它们会给用户的工作记忆造成负担；而通过分块处理，就能变得易于识别和输入。

Standard chunkings

标准分块方式

Conventions that have evolved across industries:

Type	Standard chunking	Example
US phone	3-3-4	555-867-5309
International phone	varies; usually 2-3-3-2 or similar	+44 20 7946 0958
Credit card	4-4-4-4 (most) or 4-6-5 (Amex)	4242 4242 4242 4242
Social Security (US)	3-2-4	123-45-6789
OTP / verification	3-3 (6-digit) or 4-4 (8-digit)	123-456
Bank account (US)	varies; often grouped with type	110000000 → routing display
ISBN	1-3-3-5-1 (ISBN-13)	978-3-16-148410-0
IP address	4 octets separated by dots	192.168.1.1
Date (ISO)	4-2-2	2026-05-02
Currency	3-digit groups	$1,234,567.89

When in doubt, follow the convention. Users have already learned it.

各行业逐渐形成的通用规范：

类型	标准分块格式	示例
美国手机号	3-3-4	555-867-5309
国际手机号	格式多样；通常为2-3-3-2或类似结构	+44 20 7946 0958
信用卡号	多数为4-4-4-4，运通卡为4-6-5	4242 4242 4242 4242
美国社会保障号	3-2-4	123-45-6789
OTP/验证码	6位为3-3，8位为4-4	123-456
美国银行账户	格式多样，常按类型分组	110000000 → 路由号展示格式
ISBN	1-3-3-5-1（ISBN-13）	978-3-16-148410-0
IP地址	4个八位字节用点分隔	192.168.1.1
ISO日期	4-2-2	2026-05-02
货币	每3位数字分组	$1,234,567.89

不确定时，请遵循通用规范——用户已经习惯了这些格式。

OTP / verification code entry

OTP/验证码输入

The most common modern chunking case in product UI. A 6-digit code from email or SMS, entered into a verification field.

这是产品UI中最常见的现代分块应用场景：用户需要将邮件或短信中的6位验证码输入到验证字段中。

Single field vs. chunked fields

单字段 vs 分块字段

Single field:

html

<input type="text" inputmode="numeric" maxlength="6" pattern="\d{6}" />

Chunked fields (one per digit):

html

<div class="otp-input" role="group" aria-label="Verification code">
  <input type="text" inputmode="numeric" maxlength="1" autocomplete="one-time-code" />
  <input type="text" inputmode="numeric" maxlength="1" />
  <input type="text" inputmode="numeric" maxlength="1" />
  <span class="separator" aria-hidden>—</span>
  <input type="text" inputmode="numeric" maxlength="1" />
  <input type="text" inputmode="numeric" maxlength="1" />
  <input type="text" inputmode="numeric" maxlength="1" />
</div>

The chunked version:

Visually matches how the code is presented in email/SMS.
Lets the user verify each digit's position mid-entry.
Auto-advances focus on each digit (with JS).
Supports paste-spread (paste into first input fills all).

The single-field version is simpler to implement and supports SMS-autofill on iOS via

autocomplete="one-time-code"

. Modern apps often offer both: a single field on mobile (where autofill is critical) and chunked on desktop.

单字段实现：

html

<input type="text" inputmode="numeric" maxlength="6" pattern="\d{6}" />

分块字段（每位数字对应一个输入框）：

html

<div class="otp-input" role="group" aria-label="Verification code">
  <input type="text" inputmode="numeric" maxlength="1" autocomplete="one-time-code" />
  <input type="text" inputmode="numeric" maxlength="1" />
  <input type="text" inputmode="numeric" maxlength="1" />
  <span class="separator" aria-hidden>—</span>
  <input type="text" inputmode="numeric" maxlength="1" />
  <input type="text" inputmode="numeric" maxlength="1" />
  <input type="text" inputmode="numeric" maxlength="1" />
</div>

分块版本的优势：

视觉上与邮件/短信中的验证码展示格式一致。
允许用户在输入过程中验证每位数字的位置。
可通过JS实现输入后自动聚焦到下一个输入框。
支持粘贴填充（粘贴到第一个输入框即可自动填充所有框）。

单字段版本实现更简单，且通过

autocomplete="one-time-code"

支持iOS的短信自动填充。现代应用通常会提供两种方案：移动端使用单字段（自动填充至关重要），桌面端使用分块字段。

OTP UX details

OTP的UX细节

Auto-advance focus to the next digit on input.
Auto-back focus to previous digit on backspace.
Paste support: pasting a 6-digit string into the first input should distribute across all six.
autocomplete="one-time-code"
on at least one input enables iOS Messages autofill.
Numeric keyboard on mobile via
```
inputmode="numeric"
```
.
Optional auto-submit when the last digit is entered (debate: some users dislike auto-submit because it commits before they can verify).

自动聚焦：输入一位数字后自动聚焦到下一个输入框。
回退聚焦：按退格键时自动聚焦到上一个输入框。
粘贴支持：将6位字符串粘贴到第一个输入框时，应自动分配到所有六个输入框。
autocomplete="one-time-code"
：至少在一个输入框上添加该属性，以启用iOS消息应用的自动填充功能。
移动端数字键盘：通过
```
inputmode="numeric"
```
唤起数字键盘。
可选自动提交：输入最后一位数字后自动提交（存在争议：部分用户不喜欢自动提交，因为他们还没来得及验证输入内容）。

Phone number entry

电话号码输入

Phone numbers vary widely by country. Patterns:

US-only forms: enforce 3-3-4 with format mask or chunked inputs.
International forms: use a country selector + a free-text number field; format on display rather than enforcing entry format.
Dual-purpose (international users + US-heavy): use libphonenumber or similar to validate and format dynamically.

html

<label>
  Phone
  <div class="phone-input">
    <select name="country-code">
      <option value="+1">🇺🇸 +1</option>
      <option value="+44">🇬🇧 +44</option>
      <!-- ... -->
    </select>
    <input type="tel" name="phone" placeholder="555-867-5309" />
  </div>
</label>

电话号码格式因国家而异，常见模式：

仅面向美国用户的表单：通过格式掩码或分块输入框强制3-3-4格式。
面向国际用户的表单：使用国家选择器+自由文本号码字段；在展示时进行格式化，而非强制输入格式。
兼顾国际用户与美国主流用户：使用libphonenumber等工具进行动态验证和格式化。

html

<label>
  Phone
  <div class="phone-input">
    <select name="country-code">
      <option value="+1">🇺🇸 +1</option>
      <option value="+44">🇬🇧 +44</option>
      <!-- ... -->
    </select>
    <input type="tel" name="phone" placeholder="555-867-5309" />
  </div>
</label>

Credit card display

信用卡展示

In production, never display full card numbers — show the last 4 digits chunked with masking:

**** **** **** 4242

For entry, use 4-4-4-4 chunking with auto-advance, paste support, and card-type detection:

html

<input type="text" inputmode="numeric" autocomplete="cc-number"
       placeholder="1234 5678 9012 3456" />

Built-in browsers and password managers handle most of this if you use the right

autocomplete

value.

生产环境中，绝对不能展示完整的信用卡号——应仅显示最后4位数字，其余部分用掩码分块展示：

**** **** **** 4242

输入时，使用4-4-4-4分块格式，支持自动聚焦、粘贴填充和卡类型检测：

html

<input type="text" inputmode="numeric" autocomplete="cc-number"
       placeholder="1234 5678 9012 3456" />

如果使用正确的

autocomplete

属性，浏览器和密码管理器会自动处理大部分功能。

Account IDs and identifiers

账户ID与标识符

For internal IDs (account IDs, transaction IDs, session IDs):

Display chunked if the user might read or transcribe them.

Display monospaced so digits and letters align (

font-family: monospace; font-variant-numeric: tabular-nums;

Provide one-click copy so users don't have to manually select.

html

<div class="id-display">
  <span class="id-value">ws_8f3c-7a92-1b04</span>
  <button onclick="copyToClipboard('ws_8f3c-7a92-1b04')" aria-label="Copy">📋</button>
</div>

The chunking aids reading aloud (support calls) and verification.

对于内部ID（账户ID、交易ID、会话ID）：

分块展示：如果用户需要读取或转录这些ID，应进行分块处理。
等宽字体展示：使用等宽字体确保数字和字母对齐（
```
font-family: monospace; font-variant-numeric: tabular-nums;
```
）。
一键复制：提供一键复制功能，避免用户手动选择文本。

html

<div class="id-display">
  <span class="id-value">ws_8f3c-7a92-1b04</span>
  <button onclick="copyToClipboard('ws_8f3c-7a92-1b04')" aria-label="Copy">📋</button>
</div>

分块设计有助于用户在电话支持时朗读ID，也便于验证。

Currency

货币

Currency should always use locale-appropriate digit grouping:

US English:
```
$1,234,567.89
```
(3-digit groups, period decimal).
European:
```
€1.234.567,89
```
(period grouping, comma decimal).
Indian:
```
₹12,34,567.89
```
(mixed grouping: 2-2-3).

Use

Intl.NumberFormat

to get this right per locale:

new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
  .format(1234567.89);
// "$1,234,567.89"

Numeric columns in tables should use

font-variant-numeric: tabular-nums

so digits align vertically.

货币应始终使用符合区域习惯的数字分组方式：

美式英语：
```
$1,234,567.89
```
（每3位分组，小数点为句点）。
欧洲：
```
€1.234.567,89
```
（句点分组，逗号为小数点）。
印度：
```
₹12,34,567.89
```
（混合分组：2-2-3）。

使用

Intl.NumberFormat

根据区域设置自动生成正确格式：

new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
  .format(1234567.89);
// "$1,234,567.89"

表格中的数字列应使用

font-variant-numeric: tabular-nums

，确保数字垂直对齐。

Anti-patterns

反模式

Continuous strings: a 16-digit credit card with no chunking. Users can't verify.
Inconsistent chunk sizes within a context: phone numbers shown as 3-4-3 here and 5-2-3 there. Each format is a re-learn.
Wrong locale grouping: showing
```
1,234.56
```
to a German user (who reads it as 1,234.56 = roughly 1,234 plus 56/100 instead of 1234.56).
Missing
inputmode
: a numeric field that opens the alphabet keyboard on mobile. Easy fix; commonly missed.
OTP with no auto-advance / paste support: users tab manually between fields; if they paste, only the first field fills.
Unmasked credit card display: privacy and security violation. Always mask all but the last 4.

连续字符串：16位信用卡号不进行分块，用户无法验证。
同一场景下分块格式不一致：此处手机号用3-4-3格式，彼处用5-2-3格式，用户需要重新适应。
错误的区域分组格式：向德国用户展示
```
1,234.56
```
（德国用户会理解为1加上234.56/100，而非1234.56）。
缺少
inputmode
属性：数字输入框在移动端唤起字母键盘，修复简单但常被忽略。
OTP输入无自动聚焦/粘贴支持：用户需要手动切换输入框；粘贴时仅第一个输入框被填充。
未掩码的信用卡展示：违反隐私和安全规定，应始终仅显示最后4位。

Heuristics

启发式检查

The "read it aloud" test. Try reading the chunked number aloud. If it requires re-grouping mentally, the chunking is wrong.
The cross-locale check. For currency and dates, test in at least 2–3 locales. Format mismatches are common.
The clipboard / autofill check. Does pasting the user's clipboard into your input work cleanly? Do password managers fill correctly?
The mobile keyboard check. Numeric inputs should produce numeric keyboards on mobile (
```
inputmode="numeric"
```
).

“朗读测试”：尝试朗读分块后的数字。如果需要在脑中重新分组，说明分块设计不合理。
跨区域检查：对于货币和日期，至少在2-3个区域进行测试，格式不匹配是常见问题。
剪贴板/自动填充检查：将用户剪贴板内容粘贴到输入框时是否能正常处理？密码管理器能否正确填充？
移动端键盘检查：数字输入框应在移动端唤起数字键盘（通过
```
inputmode="numeric"
```
）。

chunking-numeric-and-otp

Original

Translation

Chunking applied to numeric strings

Chunking在数字字符串中的应用

Standard chunkings

标准分块方式

OTP / verification code entry

OTP/验证码输入

Single field vs. chunked fields

单字段 vs 分块字段

OTP UX details

OTP的UX细节

Phone number entry

电话号码输入

Credit card display

信用卡展示

Account IDs and identifiers

账户ID与标识符

Currency

货币

Anti-patterns

反模式

Heuristics

启发式检查

Related sub-skills

相关子技能