អេក្រង់ផ្ទៀងផ្ទាត់លេខកូដ
អេក្រង់ដែលមនុស្សបោះបង់ច្រើនបំផុតពេលរង់ចាំសារ — មិនត្រូវបិទបាំងពេលវេលានៅសល់ និងផ្លូវសុំម្តងទៀត។
មើលជាមុនផ្ទាល់
ប្រភព
<form class="dc-vc" action="#">
<header class="dc-vc__bar">
<button class="dc-vc__back" type="button">
<span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
</button>
<h1 class="dc-vc__bartitle">인증번호 확인</h1>
</header>
<div class="dc-vc__body">
<p class="dc-vc__lead">문자로 보낸 6자리를 넣어 주세요</p>
<p class="dc-vc__to">010-1234-5678 <a class="dc-vc__edit" href="#">번호 수정</a></p>
<fieldset class="dc-vc__set">
<legend class="dc-sr">인증번호 6자리</legend>
<div class="dc-vc__cells">
<input class="dc-vc__cell" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" value="4" aria-label="인증번호 1번째 자리" />
<input class="dc-vc__cell" type="text" inputmode="numeric" maxlength="1" value="9" aria-label="인증번호 2번째 자리" />
<input class="dc-vc__cell" type="text" inputmode="numeric" maxlength="1" value="1" aria-label="인증번호 3번째 자리" />
<input class="dc-vc__cell" type="text" inputmode="numeric" maxlength="1" value="" aria-label="인증번호 4번째 자리" />
<input class="dc-vc__cell" type="text" inputmode="numeric" maxlength="1" value="" aria-label="인증번호 5번째 자리" />
<input class="dc-vc__cell" type="text" inputmode="numeric" maxlength="1" value="" aria-label="인증번호 6번째 자리" />
</div>
</fieldset>
<div class="dc-vc__foot">
<span class="dc-vc__timer">2:43 남음</span>
<button class="dc-vc__resend" type="button">다시 받기</button>
</div>
<p class="dc-vc__note">문자가 오지 않으면 스팸 차단 설정을 확인하고, 그래도 안 오면 번호를 다시 확인하세요.</p>
</div>
<div class="dc-vc__bottom">
<button class="dc-vc__submit" type="submit">확인</button>
</div>
</form>.dc-vc { display:flex; flex-direction:column; height:580px; overflow:hidden; background:var(--dc-bg); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); font-family:var(--dc-font); }
.dc-vc__bar { flex:0 0 auto; display:flex; align-items:center; gap:var(--dc-1); padding:calc(var(--dc-safe-top) + var(--dc-2)) var(--dc-2) var(--dc-2); background:var(--dc-surface); border-bottom:1px solid var(--dc-line); }
.dc-vc__back { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:var(--dc-r-full); background:transparent; color:var(--dc-text); font-size:22px; line-height:1; }
.dc-vc__back:active { background:var(--dc-sunken); }
.dc-vc__bartitle { margin:0; font-size:16px; font-weight:700; color:var(--dc-text); }
.dc-vc__body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:var(--dc-5) var(--dc-4); }
.dc-vc__lead { margin:0 0 var(--dc-1); font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.4; color:var(--dc-text); }
.dc-vc__to { display:flex; align-items:center; gap:var(--dc-2); margin:0 0 var(--dc-4); font-size:14px; color:var(--dc-text-sub); }
.dc-vc__edit { display:inline-flex; align-items:center; min-height:44px; color:var(--dc-brand-text); font-size:13px; font-weight:700; }
.dc-vc__set { min-width:0; margin:0; padding:0; border:0; }
.dc-vc__cells { display:flex; gap:var(--dc-2); }
.dc-vc__cell { flex:1 1 0; min-width:0; height:56px; padding:0; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-family:var(--dc-mono); font-size:24px; font-weight:700; text-align:center; }
.dc-vc__cell:focus { outline:none; border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-vc__cell.is-error { border-color:var(--dc-danger); background:var(--dc-danger-soft); color:var(--dc-danger); }
.dc-vc__err { display:flex; gap:var(--dc-2); margin:var(--dc-3) 0 0; font-size:13px; font-weight:700; line-height:1.5; color:var(--dc-danger); }
.dc-vc__foot { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); margin-top:var(--dc-4); }
.dc-vc__timer { font-family:var(--dc-mono); font-size:14px; color:var(--dc-text-sub); }
.dc-vc__timer--out { color:var(--dc-danger); font-weight:700; }
.dc-vc__resend { min-height:44px; padding:0 var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-family:inherit; font-size:14px; font-weight:700; }
.dc-vc__resend:active { background:var(--dc-sunken); }
.dc-vc__resend--go { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-vc__note { margin:var(--dc-5) 0 0; font-size:12px; line-height:1.7; color:var(--dc-text-mute); }
.dc-vc__bottom { flex:0 0 auto; padding:var(--dc-3) var(--dc-4) calc(var(--dc-safe-bottom) + var(--dc-3)); background:var(--dc-surface); border-top:1px solid var(--dc-line); }
.dc-vc__submit { width:100%; min-height:52px; border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-family:inherit; font-size:16px; font-weight:700; }
.dc-vc__submit:active { background:var(--dc-brand-hi); }
.dc-vc__submit[disabled] { background:var(--dc-sunken); color:var(--dc-text-mute); }របៀបប្រើ
- សរសេរលេខដែលបានផ្ញើទៅ ហើយដាក់តំណកែលេខនៅជាប់ — កន្លែងនេះទើបដឹងថាសរសេរខុស
- ដាក់ពេលរាប់ថយ និងប៊ូតុងសុំម្តងទៀត នៅក្រោមប្រអប់
- ពេលផុតកំណត់ ត្រូវចាក់ប្រអប់ ហើយបង្វែរសុំម្តងទៀតជាប៊ូតុងចម្បង
- ប្រើ autocomplete=one-time-code ឲ្យទូរសព្ទបំពេញពីសារ
ចំណុចត្រូវប្រុងប្រយ័ត្ន
- ប្រអប់នីមួយៗត្រូវមាន aria-label ប្រាប់ខ្ទង់ទី — ប្រអប់ទទេគ្មានឈ្មោះអាន
- ពេលលេខខុស មិនត្រូវតែធ្វើឲ្យប្រអប់ក្រហម; ត្រូវអាននូវមូលហេតុដោយ role=alert
- បើខ្វះ --dc-safe-bottom ប៊ូតុងខាងក្រោមនឹងត្រូវរបារ home របស់ iPhone បាំង