本文介绍如何用语义化 `
` 标签替代传统 `` 实现计算器数值输入区，通过 css 状态样式与 javascript 事件监听模拟“聚焦”行为，并支持页面加载时初始化值、点击切换激活态及后续数字输入逻辑。
在构建轻量级 Web 计算器时，有时需要更简洁、可控的 UI 表达——例如避免原生 <input> 的默认边框、光标闪烁和键盘弹出干扰（尤其在移动端）。此时，将输入区域改用 <p> 元素配合内嵌 <span> 显示数值，是一种兼顾语义性、可定制性与交互体验的方案。
✅ 结构改造：用段落承载可编辑值
首先，更新 HTML 中的 .inputs 区域，为每个字段添加 class="input-field" 并嵌入 <span> 用于动态更新数值：
<div class="inputs"> <p id="carbs" class="input-field">Carbs/100g: <span id="carbs-value">0</span></p> <p id="portion" class="input-field">Portion (g): <span id="portion-value">0</span></p> </div>
? 注意：<p> 本身不可编辑，因此我们不依赖 contenteditable（易引发兼容性与语义问题），而是通过 JS 控制其内部 <span> 的文本内容，保持 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）能向当前激活字段写入内容，需在按钮事件中判断哪个 <p> 处于 .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 控制力。
