本文介绍如何将传统表单输入域替换为语义化、可交互的 `
` 段落元素，通过 javascript 实现焦点切换与 css 状态反馈，并在页面加载时安全读取初始值，适用于轻量级 web 计算器等场景。
在构建现代 Web 计算器时，有时需兼顾简洁 UI 与操作直觉——例如用段落（
）替代输入框（），既保持文本可读性，又支持“点击即编辑”的交互逻辑。关键在于：将段落转化为可聚焦、可响应、可更新的数据容器，而非单纯展示文字。
首先，需重构 HTML 结构，为每个段落添加语义化标识与内嵌值容器：
<div class="calculator">
<div class="screen"></div>
<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>
<div class="calcul">
<!-- 按钮组保持不变 -->
<button id="one">1</button>
<button id="two">2</button>
<!-- ...其余按钮 -->
<button id="save">Save</button>
<button id="equals">=</button>
</div>
</div>接着，定义核心样式以支持视觉反馈与交互行为：
.input-field {
background-color: #f0f0f0;
padding: 12px 16px;
border-radius: 8px;
cursor: pointer;
display: inline-block;
margin: 4px 0;
transition: all 0.2s ease;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.input-field.active {
background-color: #3a7ebf;
color: white;
box-shadow: 0 0 0 2px rgba(58, 126, 191, 0.4);
}JavaScript 部分需完成三项任务：
立即学习“前端免费学习笔记（深入）”；
- 初始化状态：页面加载后读取默认值（如从 localStorage 或预设数据）；
- 激活管理：点击任一段落时，仅该段落获得 .active 类，其他移除；
- 值更新接口：提供统一方法（如 updateFieldValue(id, value)）供数字按钮调用。
完整脚本如下：
// 获取 DOM 元素
const carbsPara = document.querySelector("#carbs");
const portionPara = document.querySelector("#portion");
const carbsSpan = document.querySelector("#carbs-value");
const portionSpan = document.querySelector("#portion-value");
// 初始化：从 localStorage 或默认值加载
function loadInitialValues() {
const savedCarbs = localStorage.getItem("carbsValue") || "0";
const savedPortion = localStorage.getItem("portionValue") || "0";
carbsSpan.textContent = savedCarbs;
portionSpan.textContent = savedPortion;
}
loadInitialValues();
// 激活状态管理
carbsPara.addEventListener("click", () => {
carbsPara.classList.add("active");
portionPara.classList.remove("active");
});
portionPara.addEventListener("click", () => {
portionPara.classList.add("active");
carbsPara.classList.remove("active");
});
// 更新字段值（供计算器按钮调用）
function updateFieldValue(fieldId, newValue) {
const span = document.querySelector(`#${fieldId}-value`);
if (span) {
span.textContent = newValue;
// 同步保存到 localStorage
localStorage.setItem(`${fieldId}Value`, newValue);
}
}
// 示例：绑定数字按钮（实际中应结合键盘/按钮逻辑）
document.getElementById("one").addEventListener("click", () => {
const activeField = document.querySelector(".input-field.active");
if (activeField?.id === "carbs") {
updateFieldValue("carbs", carbsSpan.textContent + "1");
} else if (activeField?.id === "portion") {
updateFieldValue("portion", portionSpan.textContent + "1");
}
});⚠️ 注意事项：
- 段落本身不可聚焦或提交，因此需配合额外机制（如 contenteditable="true" 或弹出数字键盘）实现真正编辑；本文方案适用于“只读显示 + 外部输入”模式（如计算器按键输入）。
- 若需键盘输入支持，建议改用 并监听 input 事件，同时严格校验数字格式。
- 始终使用 textContent 而非 innerHTML 更新数值，避免 XSS 风险。
- 为提升可访问性，可为 .input-field 添加 tabindex="0" 并补充 keydown 事件支持空格/Enter 激活。
通过以上结构，你已构建出一个语义清晰、状态可控、风格一致的段落式输入系统——它不再是静态文案，而是具备交互生命的数据节点。
