HTML实现AI翻译双栏界面布局教程

应该和右侧对应译文的

在 DOM 树中位置一致。

• 用
  包裹一对原文/译文，避免全局浮动或绝对定位破坏语义流
• CSS 用 display: grid 配合 grid-template-columns: 1fr 1fr，比 float 或 inline-block 更可控
• 加 min-height: 200px 防止空内容时右侧塌陷，影响用户预期
• 别用 position: absolute 拉两个文本框——会导致滚动不同步、打印错位、屏幕阅读器无法识别对应关系

为什么 input 和 output 要分开监听，不能只靠 form submit

双栏界面的真实使用场景是“边输边看”，用户敲完一句就希望右边立刻出结果，而不是等点击按钮。这意味着必须绕过传统表单提交流程。

• 监听 input 事件（不是 change），才能捕获实时输入；change 只在失焦时触发，体验断层
• 加防抖（debounce）：连续输入时，只在停顿 300ms 后调用翻译 API，避免高频请求压垮后端
• 禁用默认回车提交行为：event.preventDefault()，否则每次按 Enter 都会刷新页面
• 注意中文输入法兼容性：用 compositionstart/compositionend 判断是否正在选词，避免把“你好”打成“niha”就发请求

翻译结果插入 DOM 时最容易踩的坑

很多人直接 innerHTML = response.text，结果发现换行没了、尖括号被转义、甚至 XSS 漏洞。

• 服务端返回的是纯文本？那就用 textContent 赋值，不解析 HTML —— 安全且保留换行符
• 需要支持粗体/斜体等简单格式？后端应返回带语义的 Markdown（如 **术语**），前端用轻量解析器转 ，别自己拼 HTML 字符串
• 段落拆分别用 split('\n') 硬切：中文可能用全角换行、英文可能含 \r\n，统一用 String.prototype.split(/[\r\n]+/)
• 插入前清空旧内容：用 element.replaceChildren()（现代浏览器）或 element.innerHTML = ''，别漏掉残留节点

移动端适配时隐藏但不能忽略的细节