入力マスクとUXフォーム

1）原則

1.助けて罰しないで。マスクは入力をガイドし、エラーを低減しますが、印刷や挿入をブロックしません。
2.データ≠の表示。「raw」正規化された値をUIのみに格納します。
3.予測可能なカーソル。任意の自動置換は、キャレットを「ジャンプ」したり、元に戻す/やり直しを壊すことはありません。
4.ロケールとデバイス。キーボード、ディバイダー、カレンダー、通貨-地域とプラットフォーム別。
5.アクセシビリティとプライバシー。テキスト+アイコン/色；機密フィールドをマスクしますが、パスワードマネージャ/オートコンプリートを妨げません。

2）マスクが適切な場合（およびそうでない場合）

使用して下さい：

安定した構造を持つフォーマット：電話、IBAN、 PAN（カード）、CVC、日付、時間、インデックス、OTP。
セパレータ付き金額（印刷時-「クリーン」入力時、ぼかし時-フォーマット）。
コード（参照。コード、プロモーション）、固定長さ。

避けて下さい：

名前/住所/電子メール（マスクは有効な文字/言語を制限します）。
複雑な無料フィールド（コメント、会社名）。
潜在的に不明な形式（国のない国際番号）で入力します。

3）マスクvsオートフォーマットvsバリデーション

マスク-オンザフライ構造ヒント（ブラケット、ハイフン）；入力/挿入を壊してはいけません。
自動フォーマット-フォーカスのぼかし/損失（数千、IBANスペース）に使用します。
検証-正しいロジック（長さ、チェックサム）、'blur'または'submit'の後にエラーが表示されます。

ルール：マスクは検証を置き換えず、自動フォーマットは入力されたマスクの意味を変更しないでください。

4） HTMLキーボードと属性

入力を高速化し、エラーを低減するために正しいタイプ/モードを選択します：

［フィールド］	'type'	'inputmode'	'autocomplete'	Ad notata（アドノータ
お電話でのお問い合わせ	'tel'	'tel'	'tel'	携帯電話の数字キーパッドを表示します
メールアドレス	'email'	'email'	'email'	ブラウザによるフォーマット検証
［合計］	'text'	'decimal'	'off'	ローカルセパレータ；数をセントで貯えて下さい
［日付］	'date'/'text'	'numeric'	'bday'/'cc-exp'	適切なネイティブピッカー
PANカード	'text'	'numeric'	'c-number'	トークン化；ブロックロギング
ホルダー名	'text'	'latin'/'text'	'cc-name'	デスクトップのオートキャップなし
IBAN（イバン）	'text'	'latin'/'text'	'off'	大文字、値にスペースはありません
OTP （6桁）	'text'	'numeric'	'one-time-code'	iOS/AndroidでのSMSオートコンプリート

5）キャリッジ、コピーペーストおよび正規化

キャレットを壊さない：文字（スペース/括弧）を自動挿入する場合、カーソル位置を調整します。
コピーペースト：挿入時に、スペース/ハイフンをクリアします。
正規化：トリミング、文字の「曲線」の置き換え（'O'→'0'はできません！）、ISBANの大文字への翻訳、統一された保存日フォーマット（ISO）。

PAN/IBAN正規化の例：

js const clean = s => s. replace(/[^\da-zA-Z]/g,'');
const normalizePAN = s => clean(s). slice (0.19) ;//no spaces/hyphens const normalizeIBAN = s => clean (s). toUpperCase();   // A–Z0–9

6）数字、通貨、ロケール

"as printed"（許容差"、または""をセパレータとして入力）、マイナーユニット（kopecks/セント）で保存します。
ロケールマッピング（数千人のグループ化）：ぼかし/提出後；フォーカスでは、編集しやすいように「raw」値を表示します。
明示的に通貨を指定し、精度を修正します（例えば、2文字）。

js function parseMoney(input) {
//resolve both comma and period as decimal const s = input. replace(/\s/g,''). replace(',', '.');
const num = Number(s);
if (Number. isNaN(num)) return null;
return Math. round(num 100); // cents
}

function formatMoney(cents, locale='ru-RU', currency='RUB') {
return (cents/100). toLocaleString(locale, { style:'currency', currency });
}

7）日付と時刻

ネイティブピッカーがプラットフォーム上で不快/異なる場合は、'DDマスク付きのテキストボックスを使用します。MM。 YYYY'、しかし、ISO' YYYY-MM-DD'を維持します。
日付リアリティチェック（29。02、範囲）、タイムゾーン-サーバー上。
ボタン「Today」、「Now」、「Clear」を追加します。

8）電話および国

2つのフィールド：国（+コード）と選択した国の番号またはスマートマスク。
完全な'+CC……'を挿入すると、国を自動補完します。
E.164（'+CCXXXXXXXXXXX'）を保存します。

9）支払の細部： PAN/IBAN/CVC/EXP

PAN： 4-4-4/4のグループ化；値で-数字のみ。Luhn-check；PANを使用したログ/アナリティクスはありません。
CVC：' password' -style （hidden）、 'autocomplete=」cc-csc」'、下書きに保存しないでください。
EXP： 'MM/YY'、 2桁の後の自動挿入'/'、範囲01-12および適度な年を点検して下さい。
IBAN：大文字、UIのみのスペース。国とチェックサムで長さを確認してください。

10） OTP/確認コード

6セル（またはNセル）でオートフォーカスと自動遷移を行い、バッファから貼り付けてすべてのコードを認識します。
'autocomplete="ワンタイムコード""、携帯電話で-SMSから自動抽出。
分割フィールド（1つのフィールド）のないバックアップ入力-スクリーンリーダー用。

html
<div class="otp" role="group" aria-label="Код из SMS">
<input inputmode="numeric" maxlength="1">
<input inputmode="numeric" maxlength="1">
<!-- … -->
</div>

11）マスクおよびa11y

ラベルは必須です（'<label for>'）。プレースホルダは例であり、置換ではありません。
ルールを並べて説明します。ヘルパーテキストの例（「Format：+CC ХХХ ХХХ-ХХ-ХХ」）。
'aria-descripedby'、 critical-'role="alert'を介してエラーを関連付けます。
テキストと輪郭のコントラスト≥ AA、'：focus-visible'は非表示にできません。

12）プライバシーとセキュリティ

機密フィールド：ログを記録しない、RUMに書き込まない、ドラフトに保存しない（PAN、 CVC、パスポート）。
マスクとフォーマットは、アカウントの有効性を明らかにするべきではありません（「電子メールが登録されている場合」……-中立的な言葉遣い）。
重要なサブミット（支払い/レート）のIdempotencyと再試行。

13）フォームの動作とパフォーマンス

非同期検査（250-400 ms）のデビット、表示表示「Check……」

1つのフィールドのために画面全体をロックしないでください。ローカルスピナー/スケルトン。
バッチDOMの変更；'transform/opacity'のみをアニメーション化します。
モバイルでは、キーボードが表示されたときに「ジャンプ」を避けます（セーフエリア、ビューポートメタ）。

14）コードスニペット

ソフトフォンマスク（インサートの破損なし）：

js function formatPhoneVisible(value) {
const d = value. replace(/\D/g,''). slice(0,15);
if (!d) return '';
if (d. startsWith('7')          d. startsWith('8')) {
return d. replace(/^([78])? (\d{3})(\d{3})(\d{2})(\d{2})./, '+7 ($2) $3-$4-$5');
}
// generic E.164 grouping: +CC XXX XXX XX XX return d. replace(/^(\d{1,3})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})./, (m,c1,c2,c3,c4,c5)=>
`+${c1}${c2?` ${c2}`:''}${c3?` ${c3}`:''}${c4?` ${c4}`:''}${c5?` ${c5}`:''}`.trim());
}

const input = document. querySelector('#phone');
input. addEventListener('input', e => {
const raw = e. target. value;
const pos = e. target. selectionStart;
const digitsBefore = raw. slice(0,pos). replace(/\D/g,''). length;
const cleaned = raw. replace(/[^\d+]/g,'');
const visible = formatPhoneVisible(cleaned);
e. target. value = visible;
// restore caret by counting digits let p = 0, count = 0;
while (p < e. target. value. length && count < digitsBefore) { if (/\d/.test(e. target. value[p])) count++; p++; }
e. target. setSelectionRange(p, p);
});

量：「raw in focus→format with blur」：

js const amount = document. getElementById('amount');
let cents = null;

amount. addEventListener('focus', () => {
if (cents!=null) amount. value = String(cents/100). replace('.', ',');
});
amount. addEventListener('blur', () => {
const v = parseMoney(amount. value) ;//from section 6 if (v = = null) return; cents = v;
amount. value = formatMoney(cents, 'ru-RU', 'RUB');
});

IBAN：大文字と小文字の下のグループ化：

js const iban = document. getElementById('iban');
iban. addEventListener('input', () => iban. value = iban. value. toUpperCase());
iban. addEventListener('blur', () => {
const raw = normalizeIBAN(iban. value);
iban. dataset. raw = raw ;//for iban submission. value = raw. replace(/(.{4})/g,'$1 '). trim () ;//view only
});

15）システムトークンの設計（例）

json
{
"input": {
"radius": 10,
"height": { "sm": 36, "md": 40, "lg": 48 },
"gap": 8,
"icon": 16
},
"mask": {
"debounceMs": 300,
"otpLength": 6,
"moneyPrecision": 2,
"phoneMaxDigits": 15
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

CSSプリセット：

css
.input { height:40px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }
.otp input { width:40px; text-align:center; }

16） iGamingの詳細

支払い/引き出し：ソフトマスク付きPAN/IBAN/金額。厳密なidempotenceと機密性の高いフィールドログの欠如。手数料と期限についてのヒント。
KYC：日付のマスク、パスポート番号（「ハード」フィルタリングなし-異なる形式を考慮して）、ファイルサイズ/タイプ、プレビュー。
制限と責任あるプレイ：理解可能な金額/期間（日/週/月）、近くのヘルパー、AAAコントラスト。
ベット：ロケールでフォーマットをぼかしたときに、フォーカス「raw」番号の金額（プリセット+フィールド）のクイックエントリ。二重分離器の非入場、「……。。「/。

17）アンチパターン

有効な文字/挿入を否定するハードマスク。
オートフォーマットでキャレットをジャンプ；抽出/元に戻すの損失。
ラベルの代わりにプレースホルダ。
値の内側に通貨を自動追加します（コピーペーストを壊します）。
デバンキングなしのエラー「文字ごと」。
ストレージ内のローカル依存フォーマット（ストアISO/番号）。
PAN/パスポート番号を記録し、拒否の「正直すぎる」理由を示します。

18）メトリクスと実験

フィールドごとのエラー率（マスク前/後）。
タイムツーコンプリートのフォームと再送信。
失敗したインサート（コピーペースト）とロールバック（元に戻す）の割合。
ヒント/例のCTR、オートコンプリートの割合。
支払のステップ/ACCの率を放棄して下さい。

19） QAチェックリスト

入力とキャレット

バッファから貼り付けても壊れず、スペース/ハイフンが正しくクリアされます。
Caretは自動フォーマット後も予測可能です。

ロケールとフォーマット

金額は'、'/'を許可します。マイナーユニットでの保管。
日付は解析され、検証されます。ISOのストレージ。

A11y

ラベルと'aria-describy'が接続されています。'role="alert''をクリティカルにします。
コントラストとフォーカスリングはAAに対応しています。

セキュリティ

機密フィールドはログ/キャッシュされません。
Idempotencyは重要なステップで再試行します。

UX

プレースホルダ-例、ラベルなし；近くのヘルパーだ。
マスクは携帯電話の印刷を防ぎません。正しいキーボード（'inputmode'）

20）設計システムにおけるドキュメンテーション

入力：'MaskedInput'、 'MoneyInput'、 'PhoneInput'、 'OtpInput'、 'IbanInput'。
マスクトークン（長さ/パターン）、キャレット/挿入ルール、数値/日付のローカライズ。
プライバシーのためのガイド（ログしないもの）、可用性と自動フォーマット対ぼかし。
実際の例とbefore/afterのメトリックで「Do/Don 't」。

概要

マスクや形状は、入力を高速化し、データをきれいに保ち、干渉しないときに適しています。慎重にフォーマットし、入り口で正規化し、安定した形で保存し、ロケールと可用性を考慮してください。フォームは、特に敏感な支払い、KYC、賭けのシナリオで、迅速かつ簡単になります。

入力マスクとUXフォーム

ロケールとフォーマット

A11y

セキュリティ

UX

概要

お問い合わせ

迅速な連絡

動画はまもなく更新されます

現在、私たちはプロジェクトで非常に多忙です