입력 마스크 및 UX 양식

1) 원칙

1. 처벌하지 마십시오. 마스크는 입력을 안내하고 오류를 줄이지 만 인쇄 및 삽입을 차단하지는 않습니다.
2. 데이터 wwwD 디스플레이. "원시" 정규화 된 값을 UI로만 저장합니다.
3. 예측 가능한 커서. 자동 교체는 캐럿을 "점프" 하거나 실행 취소/재실행을 중단하지 않습니다.
4. 로케일 및 장치. 키보드, 나누기, 캘린더 및 통화-지역 및 플랫폼 별.
5. 접근성과 프라이버시. 텍스트 + 아이콘/색상; 민감한 필드를 마스크하지만 암호 관리자/자동 완료를 방해하지는 않습니다.

2) 마스크가 적절한 경우 (그리고 그렇지 않은 경우)

• 안정적인 구조: 전화, IBAN, PAN (카드), CVC, 날짜, 시간, 색인, OTP.
• 통화 금액은 분리기 (인쇄 할 때- "깨끗한" 입력, 흐림-형식) 에 해당합니다.
• 코드 (수정 코드, 프로모션), 고정 길이.

• 이름/주소/이메일 (마스크는 유효한 문자/언어를 제한합니다).
• 복잡한 무료 필드 (댓글, 회사 이름).
• 잠재적으로 알려지지 않은 형식의 입력 (국가가없는 국제 번호).

3) 마스크 vs 자동 형식 vs 검증

마스크-즉석 구조 힌트 (괄호, 하이픈); 입력/삽입을 끊어서는 안됩니다.
자동 형식-블러/포커스 손실 (수천, IBAN 공간) 에 사용하십시오.
검증 - 정확성 논리 (길이, 체크섬), '흐림' 또는 '제출' 후 오류를 표시합니다.

규칙: 마스크는 검증을 대체하지 않으며 자동 형식은 입력 된 것의 의미를 변경해서는 안됩니다.

4) HTM 키보드 및 속성

입력 속도를 높이고 오류를 줄이기 위해 올바른 유형/모드를 선택하십시오

5) 운반, 복사 페이스트 및 정규화

캐럿을 깨뜨리지 마십시오: 문자 자동 삽입 (공간/괄호) 시 커서 위치를 조정하십시오.
복사 페이스트: 삽입 할 때 투명 공간/하이픈 → 형식으로 → 디스플레이를 검사합니다.
정규화: 트리밍, 문자의 "곡선" 교체 ('O' → '0' 은 불가능합니다!), IBAN 대문자로 변환, 통합 스토리지 날짜 형식 (ISO).

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) 숫자, 통화 및 로케일

입력 "인쇄" (공차 '또는' .' 를 분리기), 사소한 단위 (kopecks/cents) 로 저장합니다.
블러/제출 후 로케일 매핑 (수천 그룹); 초점을 맞추고 편집하기 쉽도록 "원시" 값을 표시하십시오.
통화를 명시 적으로 지정하고 정확도를 수정하십시오 (예: 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, 범위), 가로대 - 서버에서.
"오늘", "지금", "명확한" 버튼을 추가하십시오.

8) 전화와 국가

두 가지 필드: 국가 (+ 코드) 와 선택한 국가의 수 또는 스마트 마스크.
전체 '+ CC...' 를 삽입 할 때 국가를 자동으로 완료하십시오.
스토어 E.164 ('+ CCXXXXXXXX'), 공간이있는 로컬로 표시됩니다.

9) 지불 세부 사항: PAN/IBAN/CVC/EXP

PAN: 4-4-4-4/4 그룹화; 값에서 - 숫자 만; 룬 체크; PAN을 사용한 로그/분석이 없습니다.
CVC: '암호' 스타일 (숨겨진), 'autocomplete = "cc-csc"' 는 초안에 저장되지 않습니다.
EXP: 'MM/YY', 2 자리 후 자동 삽입 '/', 범위 01-12 및 합리적인 연도 확인.
IBAN: 대문자, UI에서만 공간; 국가 및 체크섬 별 길이를 확인하십시오.

10) OTP/확인 코드

버퍼에서 붙여 넣은 자동 초점 및자가 전이를 갖는 6 (또는 N) 셀은 모든 코드를 인식합니다.
'자동 완성 =' 일회성 코드 ', 휴대 전화-SMS에서 자동 추출.
스크린 리더를위한 분할 필드 (하나의 필드) 가없는 백업 입력.

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

11) 마스크와 a11y

라벨이 필요합니다 ('<레이블 for>'). 자리 표시 자가 대체가 아닌 예입니다.
규칙을 나란히 설명하십시오: 예를 들어 도우미 텍스트 ("형식: + CC 가수-가수-가수").
'aria-descripedby' 를 통한 준회원 오류, 중요- 'role = "경고"'.
텍스트와 윤곽의 대비는 AA, ': 초점 표시' 를 숨길 수 없습니다.

12) 개인 정보 보호 및 보안

민감한 필드: 로그인하지 말고 RUM에 쓰지 말고 초안 (PAN, CVC, 여권) 에 저장하지 마십시오.
마스크와 형식은 계정의 유효성을 밝히지 않아야합니다 ("이메일이 등록 된 경우"... -중립 문구).
중요한 제출물에 대한 이념성 및 재 시도 (지불/요금).

13) 형태 행동 및 성능

비동기 검사 직불 (250-400ms), 가시적 인 표시 "확인"...
한 필드를 위해 전체 화면을 잠그지 마십시오. 로컬 스피너/스켈레톤.
배치 DOM 변경; '변환/불투명도' 만 애니메이션합니다.
모바일에서-키보드가 나타날 때 "점프" 를 피하십시오 (안전 영역, 뷰 포트 메타).

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);
});

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');
});

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
.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/금액; 엄격한 dempotence 및 민감한 필드 로그 부족; 커미션 및 마감일에 대한 팁.
KYC: 날짜 마스크, 여권 번호 ("하드" 필터링 없음-다른 형식을 고려하여), 파일 크기/유형, 미리보기.
한계 및 책임있는 플레이: 이해할 수있는 양/기간 (일/주/월), 근처의 도우미, AAA 대비.
베팅: 로케일별로 형식을 흐리게 할 때 초점 "원시" 번호로 금액의 빠른 입력 (사전 설정 + 필드); 입장하지 않음, 이중 분리기 "...//이중 분리기.

17) 반 패턴

유효한 문자/삽입을 거부하는 하드 마스크.
자동 형식으로 캐럿 점프; 추출/실행 취소 손실.
라벨 대신 장소 보유자.
가치 내부에 통화를 자동 추가하십시오 (복사 페이스트 중단).
폭로없이 "문자 당" 오류.
스토리지의 로컬 독립 형식 (ISO/숫자 저장).
PAN/여권 번호를 기록하고 거부의 "너무 정직한" 이유를 보여줍니다.

18) 측정 및 실험

필드 별 오류율 (마스크 전/후).
완료 시간 양식 및 재 제출.
실패한 인서트 (복사 페이스트) 및 롤백 (실행 취소) 의 비율.
힌트/예의 CTR, 자동 완성 비율.
결제 단계/ACC에서 포기율.

19) QA 체크리스트

입력 및 캐럿

• 완충액에서 지불하면 파손되지 않으며 공간/하이픈이 올바르게 제거됩니다.
• 캐럿은 자동 형식 후에도 예측할 수 있습니다.

로케일 및 형식

• 금액은 ', '/' 를 허용합니다. 작은 단위로 저장합니다.
• 날짜는 구문 분석되고 검증됩니다. ISO 스토리지.

A11y

• 라벨과 'aria-describby' 가 연결되어 있습니다. 중요한 'role = "경고"
• 대조 및 초점 링은 AA에 해당합니다.

보안

• 민감한 필드는 기록/캐시되지 않습니다.
• 중요한 단계에서 이념과 재 시도.

UX

• 플레이스 홀더-라벨이 아닌 예; 근처의 도우미.
• 마스크는 휴대 전화 인쇄를 방해하지 않습니다. 올바른 키보드 ('inputmode').

20) 설계 시스템의 문서

'MaskedInpit', 'MoneyInpit', 'PhoneInpit', 'OtpInpit', 'IbanInpit'.
마스크 토큰 (길이/패턴), 캐럿/삽입 규칙, 번호/날짜 현지화.
프라이버시 가이드 (로그하지 않는 것), 가용성 및 자동 형식 대 흐림.
실제 예와 전후 메트릭으로 "Do/Do n 't".

간략한 요약

마스크와 모양은 입력 속도를 높이고 데이터를 깨끗하게 유지하며 방해하지 않을 때 좋습니다. 신중하게 형식화하고 입구에서 정규화하고 안정적인 형태로 저장하며 로케일 및 가용성을 고려하십시오. 그런 다음 양식은 특히 민감한 결제, KYC 및 베팅 시나리오에서 빠르고 간단 해집니다.