是否可以将<p>标签的内容值传递同步到<input>输入框中？

完全可以实现，以下是具体实现方案和注意事项：

首先先纠正示例代码的错误：<input> 是自闭合标签，不需要写 </input> 闭合标签，值需要放在 value 属性中，正确的基础结构如下：

<p id="valueDisplay">2</p>
<input type="number" id="valueInput">

场景1：页面加载时一次性同步 #

只需要在页面加载完成后，获取p标签的文本内容赋值给input即可：

window.addEventListener('DOMContentLoaded', () => {
  const displayVal = document.getElementById('valueDisplay').textContent.trim();
  document.getElementById('valueInput').value = displayVal;
});

场景2：p标签内容动态变化时实时同步 #

如果p标签的内容会在页面运行过程中被其他逻辑修改，需要自动同步到input，可以用MutationObserver监听p标签的内容变化：

const displayEle = document.getElementById('valueDisplay');
const inputEle = document.getElementById('valueInput');

// 先做一次初始化同步
inputEle.value = displayEle.textContent.trim();

// 监听p标签内容变更
const observer = new MutationObserver(() => {
  inputEle.value = displayEle.textContent.trim();
});
observer.observe(displayEle, { childList: true });

场景3：双向同步 #

如果需要input修改后也自动更新p标签的内容，再加一个input的事件监听即可：

inputEle.addEventListener('input', () => {
  displayEle.textContent = inputEle.value;
});

如果是使用Vue、React这类前端框架，直接给两个元素绑定同一个响应式状态变量即可，不需要手动写监听逻辑。

内容的提问来源于stack exchange，提问作者user16195366