点击元素后如何将光标强制定位到input输入框中？

没问题，我来帮你搞定这个需求！你想要的是点击指定文本后，把它转换成输入框，同时光标自动定位到输入框里对吧？我调整了你的代码，补充了自动聚焦的核心逻辑，下面是完整的实现方案：

完整代码示例 #

HTML #

<p id='target' onClick='switchToInput()'>点击这里开始编辑</p>
<input id="editInput" type='text' value='默认编辑文本' name='name' />

CSS #

#editInput {
  display: none;
}

JavaScript #

const switchToInput = () => {
  const targetText = document.getElementById('target');
  const inputField = document.getElementById('editInput');
  
  // 隐藏原文本，显示输入框
  targetText.style.display = 'none';
  inputField.style.display = 'block';
  
  // 核心：让光标自动聚焦到输入框内
  inputField.focus();
  // 可选：自动选中输入框内的现有文本，方便用户直接覆盖编辑
  inputField.select();
}

关键细节说明 #

• 我给输入框加了id，相比querySelector能更精准地定位元素，避免潜在的选择器冲突问题
• 实现自动聚焦的核心是调用输入框的focus()方法，这会让浏览器自动把光标定位到输入框中
• 额外添加的select()方法是优化体验的小技巧，用户点击后可以直接输入覆盖原有内容，不用手动删除

可选拓展优化 #

如果需要支持点击输入框外或按下回车键就切换回文本显示，可以补充以下逻辑：

// 监听输入框的回车事件
const inputField = document.getElementById('editInput');
const targetText = document.getElementById('target');

inputField.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    switchBackToText();
  }
});

// 点击页面其他区域切换回文本
document.addEventListener('click', (e) => {
  if (e.target !== inputField && e.target !== targetText) {
    switchBackToText();
  }
});

// 切换回文本状态的函数
const switchBackToText = () => {
  targetText.textContent = inputField.value;
  targetText.style.display = 'block';
  inputField.style.display = 'none';
}

内容的提问来源于stack exchange，提问作者Gergő Horváth