支持自动高度需用min-height/max-height/overflow-y+box-sizing:border-box，JS监听input事件动态设scrollHeight；提交按钮点击即禁用并改文字，fetch需catch错误；select分类须required且value为英文标识符；粘贴强制转纯文本并微任务处理。
怎么让
用户输入反馈时，固定高度的 textarea 经常被撑破或留大片空白，视觉割裂还影响提交意愿。核心不是“加高”，而是让它随内容自然伸缩，同时不破坏表单边框和对齐。
- 别用
height: 100px硬设——它会遮挡超出内容，且无法响应文字增减 - 用
min-height+max-height+overflow-y: auto组合：既保最小可用空间，又防无限拉长 - 必须加
box-sizing: border-box，否则 padding 和 border 会额外增加高度，导致布局错位 - JS 动态调整需监听
input事件（不是change），并在设置scrollHeight后强制重置height再设回auto，避免 Safari 下卡住
textarea {
min-height: 80px;
max-height: 200px;
width: 100%;
box-sizing: border-box;
overflow-y: auto;
}
提交按钮点击后如何禁用+显示加载状态
用户连点两次反馈按钮，后端可能收到重复请求，前端却没任何反馈。这不是“加个 loading 图标”就能解决的——关键在状态同步和防重复提交逻辑。
- 点击后立刻
button.disabled = true，同时把textContent改成'提交中…'，别只改 class 或加伪元素 - 不要等 AJAX 完成才禁用——网络延迟下用户仍可点，必须在
click回调第一行就执行禁用 - 成功/失败后必须手动恢复按钮：设
disabled = false并还原文字，否则用户刷新前无法再操作 - 如果用了
fetch，记得catch网络错误，不然按钮永远卡在 loading 状态
反馈表单里怎么正确处理「问题分类」下拉选项
分类选错导致工单进错队列，比不填还麻烦。纯靠前端 select 不够，得兼顾语义、可访问性和后端校验一致性。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<select>必须带required属性，且第一个<option>的value为空字符串、文字为'请选择问题类型'，不能用disabled selected混淆默认值 - 分类选项的
value应该是简短英文标识符（如'ui_bug'、'api_timeout'），别用中文或长句——方便后端路由和日志归类 - 如果分类有层级（比如「前端 → 表单 → 输入框」），别塞进单层
select，改用optgroup或拆成级联选择，否则屏幕阅读器会读成一长串 - 后端必须校验该字段存在且在白名单内，前端 JS 生成的选项不可信
用户粘贴长文本时怎么防止页面卡死
有人直接从 Word 或网页复制大段带格式内容进反馈框，textarea 虽然能接住，但后续 DOM 渲染或 JS 处理可能卡顿，尤其低端手机上明显掉帧。
立即学习“前端免费学习笔记（深入）”；
- 监听
paste事件，在e.preventDefault()后用e.clipboardData.getData('text/plain')强制转纯文本 - 别在
paste回调里做正则替换或 DOM 操作——这些放setTimeout(..., 0)微任务延后执行 - 如果要做敏感词过滤，用
String.prototype.includes()替代全局正则（/xxx/g），后者在超长文本下性能暴跌 - 移动端 iOS Safari 对
clipboardData支持有限，降级方案是 paste 后立即读取textarea.value并用textContent清洗一次
最易被忽略的是：所有输入框的 maxlength 属性必须和后端限制一致，否则用户输到一半被截断，还看不到提示。这个数字不是拍脑袋定的，得看存储字段类型（比如 MySQL 的 VARCHAR(500) 就对应 500）。
