跳转到主内容
新派编程网 - 新潮编程理念，全新技术课堂！
📁 网站地图

HTML怎么做填空题组件_html填空题输入组件实现方法【零基础】

林译川
林译川
• 👁 0人浏览过
填空题组件可用原生HTML+JS实现，需确保结构语义化、数据可映射、回显不丢值，避开DOM重复ID、正则误匹配、空格/大小写校验失效三类高频坑。 填空题组件不用框架也能做，关键在结构语义化、数据可映射、回显不丢值——原生 HTML + JS 就够用，但必须避开 DOM 重复 ID、正则误匹配、空格/大小写校验失效这三类高频坑。 怎么用
{n}
占位符动态生成填空输入框 用户配置题干时用
{1}
、
{2}
表示填空位置，JS 需用正则提取并替换成
，但注意： 正则必须用
/\{(\d+)\}/g
（带全局 flag 和捕获组），不能只写
/\{.*?\}/
，否则多层嵌套或连续占位会错位 替换时每个
input
的
name
设为
blank-1
、
blank-2
，避免 name 重复导致表单提交只取最后一个值 别给 input 加固定
id
，改用
data-index="1"
存位置，回显和校验都靠它查数组 原始题干里如果有字面量
{1}
（比如讲正则的题目），需提前转义，例如写成
\{1\}
，并在匹配前先还原 填空答案怎么比对才不容易判错 用户输入和标准答案直接
===
会因空格、换行、大小写失败，必须统一预处理： 用
String(value).trim().toLowerCase().replace(/\s+/g, ' ')
标准化两边字符串 填空题的
answer
字段建议存为数组（如
["HTTP", "http", "Http"]
），校验时用
answers.some(a => unify(a) === unify(input.value))
如果题干含多个填空，
dataset.answer
可设为 JSON 字符串，如
data-answer='["GET", "POST"]'
，解析后逐项比对 不要在 input 上加
required
后就以为前端校验完整了——空格输入、全角空格、零宽字符仍能绕过，必须 JS 层二次清洗 怎么让填空组件支持回显且不污染原始 DOM 用户刷新或编辑时要恢复上次填写的内容，但不能靠 innerHTML 替换整个题干（会丢失事件绑定和已输入值）： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 立即学习 “ 前端免费学习笔记（深入） ”； 初始化时遍历所有
input[data-index]
，从保存的数据对象中取
data[index]
赋值给
input.value
不要用
innerHTML.replace()
把答案再塞回去——那会销毁 input 元素，导致焦点丢失、输入历史清空 如果题干是富文本（含
或换行），填空位置要用
占位，再用 JS 把 input 插入该位置，而非直接替换文本 回显前检查数据长度是否匹配填空数量，少于项数就补空字符串，多于项数就截断，避免
index out of bounds
为什么用
包裹填空题比单独用
更稳 不是为了提交到后端，而是借力浏览器原生机制：
form.checkValidity()
可批量触发所有
required
填空的验证气泡提示 监听
form.submit
事件做统一拦截，比给每个 input 绑
blur
更轻量 用
form.dataset.answer
存标准答案，比挂全局变量或查 DOM 更解耦 如果后续要加「重置」按钮，直接
form.reset()
就清空所有填空，不用手动遍历 input 最易被忽略的是：填空位置索引必须从 1 开始且连续。如果题干里写了
{1}
和
{3}
中间漏了
{2}
，回显数组下标就会错位——要么强制校验配置合法性，要么在校验时用
Map
以 index 为 key 存答案，不依赖数组顺序。

相关文章