如何将 HTML 输入字段替换为可交互的段落元素并实现焦点切换_技术教程

本文介绍如何用语义化 `

` 标签替代传统表单输入框，通过 javascript 实现点击激活、css 状态反馈，并在页面加载时读取初始值，适用于轻量级计算器等交互式 ui 场景。

在构建现代 Web 计算器（如营养成分计算器）时，有时需规避原生的默认样式与行为，转而使用更灵活、语义清晰的

元素模拟“可编辑区域”。关键在于：让段落具备输入焦点管理能力、视觉反馈机制，以及与数字键盘联动的数据绑定逻辑。

✅ 步骤一：结构优化——语义化段落 + 内嵌值容器

将纯文本

升级为带状态标识和动态值显示的交互容器。推荐在段落中嵌套作为数值占位符，便于后续 JS 精准更新：

  Carbs/100g: 0
  Portion (g): 0

⚠️ 注意：id="carbs-value" 和 id="portion-value" 是数据渲染的核心锚点，不可省略。

✅ 步骤二：样式控制——通过 CSS 类实现视觉焦点

定义 .input-field 基础样式，并用 .active 类突出当前选中项。使用 cursor: pointer 明确提示可交互性：

.input-field {
  background-color: #f0f0f0;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  margin: 4px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: all 0.2s ease;
}

.input-field.active {
  background-color: #3a7ebf;
  color: white;
  box-shadow: 0 0 0 2px rgba(58, 126, 191, 0.4);
}

✅ 步骤三：JavaScript 逻辑——焦点切换与初始值读取

使用事件委托或独立监听器管理激活状态，并在页面加载后立即读取并初始化数值（例如从 localStorage 或默认配置）：

// 获取 DOM 元素
const carbsPara = document.querySelector("#carbs");
const portionPara = document.querySelector("#portion");
const carbsValueSpan = document.querySelector("#carbs-value");
const portionValueSpan = document.querySelector("#portion-value");

// 初始化：从 localStorage 或默认值加载（示例）
const initValue = (span, key, defaultValue = "0") => {
  const saved = localStorage.getItem(key) || defaultValue;
  span.textContent = saved;
};

initValue(carbsValueSpan, "carbsInput", "0");
initValue(portionValueSpan, "portionInput", "0");

// 焦点切换逻辑
const setActive = (target, other) => {
  target.classList.add("active");
  other.classList.remove("active");
};

carbsPara.addEventListener("click", () => setActive(carbsPara, portionPara));
portionPara.addEventListener("click", () => setActive(portionPara, carbsPara));

// ? 可选：支持键盘方向键切换（增强可访问性）
document.addEventListener("keydown", (e) => {
  if (e.key === "Tab") {
    e.preventDefault();
    if (carbsPara.classList.contains("active")) {
      setActive(portionPara, carbsPara);
    } else {
      setActive(carbsPara, portionPara);
    }
  }
});

✅ 步骤四：与数字键盘联动（简要示意）

当用户点击 button#one 等按键时，根据当前 active 段落更新对应的内容：

document.querySelectorAll(".calcul button:not(#save, #equals, #clear)").forEach(btn => {
  btn.addEventListener("click", () => {
    const value = btn.id === "decimal" ? "." : btn.textContent;

    if (carbsPara.classList.contains("active")) {
      carbsValueSpan.textContent = (carbsValueSpan.textContent + value).replace(/^0+(?=\d)/, "");
    } else if (portionPara.classList.contains("active")) {
      portionValueSpan.textContent = (portionValueSpan.textContent + value).replace(/^0+(?=\d)/, "");
    }
  });
});

// 清空逻辑示例
document.getElementById("clear").addEventListener("click", () => {
  if (carbsPara.classList.contains("active")) {
    carbsValueSpan.textContent = "0";
  } else {
    portionValueSpan.textContent = "0";
  }
});

? 总结与最佳实践

语义优先：用
替代并非放弃可访问性，而是需配合 role="textbox"、aria-label 和键盘导航补全；生产环境建议仍以为基础，仅用 CSS 覆盖样式。
状态隔离：确保每次仅一个段落处于 .active 状态，避免多点激活导致逻辑混乱。
持久化建议：利用 localStorage 在页面刷新后恢复用户上次输入，提升体验连贯性。
响应式适配：在移动端添加 touchstart 事件监听，兼容触摸屏设备。

通过以上方案，你既能获得

标签的布局自由度与语义优势，又能实现媲美原生输入控件的交互体验。