HTML文本域标签如何实现双栏对照翻译的输入区

双栏对照翻译输入区应使用语义化结构包裹一对文本域，左侧为可编辑中文输入框，右侧为只读英文输出框；通过Grid/Flex实现响应式双栏布局，监听input事件配合防抖与输入法兼容逻辑实时翻译，并确保可访问性与交互细节完善。

用 <textarea> 实现双栏对照翻译的输入区，关键不是堆两个文本框，而是让左右内容形成可映射、可同步、语义清晰的结构关系。输入区只是其中一环，必须和输出区协同设计。

结构上用语义容器包裹一对文本域

不要写两个孤立的 <textarea>，而是用 <section class="translation-pair"> 包裹原文输入与译文展示区域：

1. 左侧放中文输入：<textarea id="chinese-input" placeholder="请输入中文"></textarea>
2. 右侧放英文输出（只读）：<textarea id="english-output" readonly placeholder="翻译结果将显示在此处"></textarea>
3. 整个配对块具备唯一 DOM 层级关系，方便 JS 按组操作、CSS 按组布局

样式上用 Grid 或 Flex 控制双栏流式响应

避免 float、absolute 或 table 布局——它们破坏语义、干扰滚动同步、不兼容屏幕阅读器：

1. 桌面端（≥768px）：用 display: grid; grid-template-columns: 1fr 1fr; 实现左右等宽并排
2. 移动端（<768px）：用 @media (max-width: 767px) { .translator-container { flex-direction: column; } } 自动转为上下堆叠
3. 给每个 <textarea> 设 min-height: 200px，防止空内容时高度塌陷、视觉失衡

行为上监听 input 事件 + 防抖 + 中文输入法兼容

用户需要“打完就出结果”，不能依赖按钮或表单提交：

1. 监听 input 事件（不是 change），实时捕获每次按键
2. 加防抖逻辑：连续输入停顿 300ms 后才调翻译 API，避免无效请求
3. 监听 compositionstart 和 compositionend，在中文输入法选词过程中暂停触发，防止“ni”“ha”分段翻译
4. 调用 API 后，用 textContent（非 innerHTML）插入结果，防止 XSS

细节上控制可交互性与可访问性

输入区不只是能打字，还要符合真实使用习惯：

1. 禁用回车默认提交：event.preventDefault()，否则按 Enter 会刷新页面
2. 移除 textarea 右下角拖拽手柄：resize: none;，保持界面整洁可控
3. 设置 autofocus 让页面加载后光标自动落在中文输入框
4. 用 aria-label 或关联 <label> 明确说明左右区域用途，方便读屏软件识别