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

本文介绍如何将静态段落（`

`）模拟为可编辑输入区域，通过 css 样式和 javascript 事件监听实现点击激活、视觉反馈及数值管理，适用于无表单控件的轻量级计算器界面。

在构建 Web 计算器时，有时出于 UI 统一性或设计约束，需避免使用原生元素，转而用语义化更强、样式更可控的

标签承载输入状态。关键在于：让段落具备“可聚焦”行为、支持数值更新、提供视觉激活反馈，并能被 JavaScript 正确读取初始值。

✅ 实现步骤详解

1. 结构优化：嵌套存储动态值

将原始纯文本段落改造为带数据容器的结构，便于 JS 操作与 DOM 更新：

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

⚠️ 注意：作为值容器，不参与布局干扰，且可被 textContent 安全更新。

2. 样式定义：模拟输入态与激活态

使用 CSS 类控制交互样式，确保视觉反馈明确、符合用户预期：

.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;
  user-select: none; /* 防止误选文字 */
}

.input-field.active {
  background-color: #007aff;
  color: white;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}

transition 提升交互流畅感；
user-select: none 避免点击时高亮文字影响体验；
box-shadow 强化焦点边界，替代传统 outline。

3. 逻辑绑定：单点激活 + 值同步

通过事件监听实现“段落即输入框”的核心逻辑——仅允许一个字段处于激活态，并初始化读取默认值：

const carbsField = document.getElementById("carbs");
const portionField = document.getElementById("portion");
const carbsValue = document.getElementById("carbs-value");
const portionValue = document.getElementById("portion-value");

// 初始化：页面加载后读取默认值（可来自 localStorage 或服务端）
function initValues() {
  const savedCarbs = localStorage.getItem("carbs") || "0";
  const savedPortion = localStorage.getItem("portion") || "0";
  carbsValue.textContent = savedCarbs;
  portionValue.textContent = savedPortion;
}

// 激活逻辑：点击任一段落，设为 active，另一方取消
carbsField.addEventListener("click", () => {
  carbsField.classList.add("active");
  portionField.classList.remove("active");
});

portionField.addEventListener("click", () => {
  portionField.classList.add("active");
  carbsField.classList.remove("active");
});

// 可选：键盘输入支持（如需进一步增强交互）
document.addEventListener("keydown", (e) => {
  const activeField = document.querySelector(".input-field.active");
  if (!activeField) return;

  const valueSpan = activeField.querySelector("span");
  let current = valueSpan.textContent;

  if (e.key >= "0" && e.key <= "9") {
    valueSpan.textContent = current === "0" ? e.key : current + e.key;
  } else if (e.key === ".") {
    if (!current.includes(".")) {
      valueSpan.textContent = current + ".";
    }
  } else if (e.key === "Backspace") {
    valueSpan.textContent = current.length > 1 ? current.slice(0, -1) : "0";
  } else if (e.key === "Escape") {
    activeField.classList.remove("active");
  }
});

// 页面加载后初始化
window.addEventListener("DOMContentLoaded", initValues);

4. 获取当前值（供计算逻辑调用）

在执行计算前，统一提取数值（建议做类型安全转换）：

function getCarbsValue() {
  return parseFloat(carbsValue.textContent) || 0;
}

function getPortionValue() {
  return parseFloat(portionValue.textContent) || 0;
}

// 示例：点击“=”按钮时调用
document.getElementById("equals").addEventListener("click", () => {
  const carbs = getCarbsValue();
  const portion = getPortionValue();
  const result = (carbs * portion) / 100; // 示例公式
  document.querySelector(".screen").textContent = result.toFixed(2);
});