双栏对照翻译输入区应使用语义化结构包裹一对文本域，左侧为可编辑中文输入框，右侧为只读英文输出框；通过Grid/Flex实现响应式双栏布局，监听input事件配合防抖与输入法兼容逻辑实时翻译，并确保可访问性与交互细节完善。
用 <textarea></textarea> 实现双栏对照翻译的输入区，关键不是堆两个文本框，而是让左右内容形成可映射、可同步、语义清晰的结构关系。输入区只是其中一环，必须和输出区协同设计。
结构上用语义容器包裹一对文本域
不要写两个孤立的 <textarea></textarea>，而是用 <section class="translation-pair"></section> 包裹原文输入与译文展示区域：
- 左侧放中文输入：
<textarea id="chinese-input" placeholder="请输入中文"></textarea> - 右侧放英文输出（只读）：
<textarea id="english-output" readonly placeholder="翻译结果将显示在此处"></textarea> - 整个配对块具备唯一 DOM 层级关系，方便 JS 按组操作、CSS 按组布局
样式上用 Grid 或 Flex 控制双栏流式响应
避免 float、absolute 或 table 布局——它们破坏语义、干扰滚动同步、不兼容屏幕阅读器：
- 桌面端（≥768px）：用
display: grid; grid-template-columns: 1fr 1fr;实现左右等宽并排 - 移动端（@media (max-width: 767px) { .translator-container { flex-direction: column; } } 自动转为上下堆叠
- 给每个
<textarea></textarea>设min-height: 200px，防止空内容时高度塌陷、视觉失衡
行为上监听 input 事件 + 防抖 + 中文输入法兼容
用户需要“打完就出结果”，不能依赖按钮或表单提交：
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件（不是change），实时捕获每次按键 - 加防抖逻辑：连续输入停顿 300ms 后才调翻译 API，避免无效请求
- 监听
compositionstart和compositionend，在中文输入法选词过程中暂停触发，防止“ni”“ha”分段翻译 - 调用 API 后，用
textContent（非innerHTML）插入结果，防止 XSS
细节上控制可交互性与可访问性
输入区不只是能打字，还要符合真实使用习惯：
- 禁用回车默认提交：
event.preventDefault()，否则按 Enter 会刷新页面 - 移除 textarea 右下角拖拽手柄：
resize: none;，保持界面整洁可控 - 设置
autofocus让页面加载后光标自动落在中文输入框 - 用
aria-label或关联<label></label>明确说明左右区域用途，方便读屏软件识别
