本文介绍如何用语义化 `
` 标签替代传统 `` 实现计算器数值输入区，通过 css 状态样式与 javascript 事件监听模拟“聚焦”行为，并支持页面加载时初始化值、点击切换激活态及后续数字输入逻辑。
在构建轻量级 Web 计算器时，有时需要更简洁、可控的 ui 表达——例如避免原生 的默认边框、光标闪烁和键盘弹出干扰（尤其在移动端）。此时，将输入区域改用
元素配合内嵌 显示数值，是一种兼顾语义性、可定制性与交互体验的方案。
✅ 结构改造：用段落承载可编辑值
首先，更新 html 中的 .inputs 区域，为每个字段添加 class=”input-field” 并嵌入 用于动态更新数值：
Carbs/100g: 0
Portion (g): 0
? 注意： 本身不可编辑，因此我们不依赖 contenteditable（易引发兼容性与语义问题），而是通过 js 控制其内部 的文本内容，保持 dom 清晰、无障碍友好。
? 样式增强：视觉反馈激活状态
使用 css 定义默认态与激活态，提供明确的用户反馈：
.input-field { background-color: #f0f0f0; padding: 12px 16px; border-radius: 8px; cursor: pointer; margin: 4px 0; font-size: 1rem; transition: all 0.2s ease; user-select: none; /* 防止误选文字 */ } .input-field.active { background-color: #4a6fa5; color: white; box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.4); }⚙️ 交互逻辑：点击切换焦点 + 初始化值
在页面加载后，初始化字段值（如从 localStorage 或默认值读取），并绑定点击事件以管理“激活”状态：
立即学习“前端免费学习笔记（深入）”；
// 获取 DOM 元素 const carbsPara = document.querySelector("#carbs"); const portionPara = document.querySelector("#portion"); const carbsSpan = document.querySelector("#carbs-value"); const portionSpan = document.querySelector("#portion-value"); // 初始化值（示例：从 localStorage 或设为 0） const initValue = (span, key, defaultValue = "0") => { const saved = localStorage.getItem(key) || defaultValue; span.textContent = saved; }; initValue(carbsSpan, "carbsInput", "0"); initValue(portionSpan, "portionInput", "0"); // 点击切换激活状态 carbsPara.addEventListener("click", () => { carbsPara.classList.add("active"); portionPara.classList.remove("active"); }); portionPara.addEventListener("click", () => { portionPara.classlist.add("active"); carbsPara.classList.remove("active"); });? 后续扩展：数字按钮写入逻辑（关键衔接）
为使数字按钮（如 #one, #decimal）能向当前激活字段写入内容，需在按钮事件中判断哪个
处于 .active 状态：
// 示例：数字按钮通用处理 function appendToActive(value) { if (carbsPara.classList.contains("active")) { carbsSpan.textContent = (parseFloat(carbsSpan.textContent) || 0) + value; } else if (portionPara.classList.contains("active")) { portionSpan.textContent = (parseFloat(portionSpan.textContent) || 0) + value; } } document.getElementById("one").addEventListener("click", () => appendToActive("1")); document.getElementById("decimal").addEventListener("click", () => appendToActive(".")); document.getElementById("clear").addEventListener("click", () => { if (carbsPara.classList.contains("active")) carbsSpan.textContent = "0"; else portionSpan.textContent = "0"; });✅ 最佳实践提醒
- 可访问性：为 .input-field 添加 role=”button” 和 tabindex=”0″，并补充 aria-label（如 aria-label=”Edit carbs per 100g”），确保键盘用户可通过 Tab 切换并回车触发。
- 数据持久化：在值变更后调用 localStorage.setItem() 保存最新状态，提升用户体验。
- 防错处理：对 parseFloat() 结果做空值校验，避免 NaN 写入显示。
- 移动端适配：建议在 .input-field 上添加 touch-action: manipulation 提升点击响应速度。
通过以上结构、样式与脚本协同，你已成功将静态段落转化为具备状态管理与输入能力的交互式字段——既保持 HTML 语义纯净，又赋予精准的 UI 控制力。