简答题组件必须使用<textarea>而非<input type="text">，因其支持换行、段落、中文标点及合理字数；需设置name对齐后端、rows控制高度、CSS禁用横向缩放、移动端关闭自动纠错；字数限制应通过JS按视觉字数实时校验并提示，提交前须trim()校验空白值，辅以聚焦样式、可读placeholder、超限反馈及清空按钮等体验优化。
简答题组件的核心是 <textarea>，不是 <input type="text">
用户填空、单选、判断可以用 <input>，但简答题必须支持换行、段落、中文标点和合理字数（通常 50–500 字），<textarea> 是唯一语义正确且浏览器原生支持的方案。<input type="text"> 强制单行，粘贴多行内容会丢失换行符，提交后后端拿到的是一团乱码。
实操建议：
- 用
<textarea name="answer"></textarea>，name值需与后端字段对齐，避免用id替代 - 加
rows="4"控制默认可见行数（别设rows="1"—— 那就退化成 input 了） - 禁用缩放：在 CSS 中写
textarea { resize: vertical; }，既保留高度调节，又防止用户横向拉扯破坏布局 - 移动端务必加
autocapitalize="off" autocorrect="off"，避免 iOS 自动大写首字母或纠错干扰答题逻辑
限制字数不能只靠 maxlength 属性
maxlength 看似简单，但它按 Unicode 码点计数，对中文、emoji、全角标点都“一视同仁”。比如一个 ? 占 2 个码点（UTF-16），而「你好」两个汉字各占 1 码点 —— 表面设 maxlength="100"，实际能输的汉字可能不到 100 个，尤其当题目要求“不超过 100 字”时，用户会困惑为什么刚打 95 个字就锁死了。
更稳妥的做法是 JS 实时统计「视觉字数」：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
str.replace(/[\u4e00-\u9fa5\u3000-\u303f\uf900-\ufa5f]/g, 'aa').length粗略区分中/英文字符（中文算 1 字，ASCII 字母数字算 0.5 字，空格标点算 0.5 字）—— 适用于大多数教育场景的宽松字数校验 - 显示实时字数提示：
<small class="char-count">已输入 <span>0</span>/100 字</small>，并绑定input事件更新span - 提交前仍需后端二次校验：前端可绕过，
maxlength只是辅助体验，不能替代服务端验证
提交时要处理空白值和纯空白符
用户可能点一下 <textarea> 就直接提交，或者只敲了空格、换行、制表符。这类值对简答题毫无意义，但 value.trim() === '' 才算真正“没答”，否则后端收到 "\n \t " 还得额外清洗。
推荐在表单 submit 事件里统一拦截：
- 获取
textarea.value.trim()，为空则alert('请填写答案')并event.preventDefault() - 不要依赖
required属性：它只检测value === ''，对"\n\t "无效 - 如果允许“留空作答”，那就明确设计为“跳过此题”按钮，而不是让用户交一个空格上去
样式和交互细节决定用户是否愿意写完
一个简答题框，用户平均停留 15–30 秒。在这段时间里，光标闪烁位置、边框颜色、聚焦反馈、字数提示是否实时，都会影响完成率。
关键细节：
- 聚焦时加
outline: 2px solid #007bff;，别用outline: none—— 键盘用户根本不知道当前在哪 - 禁用
textarea::placeholder { color: #999; }的默认浅灰，改用#777保证可读性（尤其 iPad 上 placeholder 经常看不清） - 字数超限时，把字数提示文字变红，并让
textarea边框也变红（仅 CSS:invalid不够准，需配合 JS 切换class="over-limit"） - 别自动聚焦第一个
<textarea>—— 页面滚动错位 + 屏幕阅读器误读，教育类页面尤其要注意
最易被忽略的是：没有提供「清空」快捷操作。加一个微小的 × 按钮（绝对定位在右下角），点击清空并聚焦，比让用户手动全选删除友好得多。
