纯html无法生成图形验证码，但可构建语义清晰的输入容器，核心是+验证码图片区域，需设maxlength、autocomplete="off"、autocapitalize="none"、aria-label和name属性，并配合等宽字体、合理边框与聚焦反馈样式。
验证码输入框需要哪些基础结构
纯 HTML 无法生成图形验证码，但可以构建一个语义清晰、样式可控的输入容器。核心是 <input type="text"> + 验证码图片或文字提示区域。别用 <textarea></textarea> 或 <div contenteditable>，它们会破坏表单提交逻辑和移动端光标定位。<ul>
<li>必须设置 <code>maxlength="4"（或对应位数），防止用户输超长内容
autocomplete="off" 和 autocapitalize="none"，避免浏览器自动填充或首字母大写 aria-label="请输入验证码" 是无障碍刚需，尤其对读屏软件友好 name 属性，否则后端收不到字段 怎么让输入框看起来像“验证码专用”
视觉上区分普通输入框，关键在边框、字体、间距和反馈状态。默认状态下建议：
- 使用等宽字体：
font-family: "SF Mono", "Consolas", monospace;，避免数字 0/O、1/l 混淆 - 字号设为
16px，太小难看清，太大易溢出 - 左右内边距留足
padding: 0 12px;，给清除按钮或图标留空间 - 边框用
border: 1px solid #d1d5db;，聚焦时换成border-color: #3b82f6;
示例片段：
<input type="text" name="captcha" maxlength="4" autocomplete="off" autocapitalize="none" aria-label="请输入验证码" style="font-family: 'SF Mono', 'Consolas', monospace; font-size: 16px; padding: 0 12px; border: 1px solid #d1d5db;">
点击验证码图片刷新时如何保持焦点不丢失
常见错误：点图片触发 location.reload() 或直接改 <img src>，导致输入框失焦、光标消失、已输内容清空。
正确做法是只更新图片 URL 的查询参数，比如加时间戳：
- 给图片加
id="captcha-img" - 点击事件里执行：
document.getElementById('captcha-img').src = '/captcha?' + Date.now(); - 同时调用
inputElement.focus()，确保光标还在输入框里 - 如果用了防抖，注意别把连续点击变成无效刷新
别在图片上写 onclick="this.src=...+Math.random()"，容易被缓存拦截。
移动端下输入框被键盘遮挡怎么办
iOS Safari 和部分安卓浏览器中，position: fixed 或底部弹层里的验证码输入框常被软键盘顶走。这不是 CSS 能完全解决的，得靠行为控制：
- 给输入框加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，在focus事件里触发 - 避免把输入框放在
overflow: hidden的父容器里，否则滚动会被截断 - 不要用
height: 100vh布局，iOS 键盘弹出会压缩视口高度，造成错位 - 测试真机，模拟器往往不暴露这个问题
最稳妥的方式：验证码模块尽量靠近页面顶部，或者用 Modal 弹出时加 transform: translateY(0) 强制重绘。
