这是100%的代码：
<html lang="en">
<head>
<title>Test</title>
<script defer src="index.js"></script>
</head>
<body>
<span id="spanName">Hi</span>
</body>
</html>
const mySpan = document.getElementById('spanName');
mySpan.addEventListener('click', e =>{
document.getElementById('spanName').innerHTML = "<form><input type="text" placeholder="enter name"></input></form>"
})
这基本上是我想要的。当我点击这个跨度时，它会用输入表单替换内部HTML。唯一的问题是，除非你按住鼠标左键，否则它不会保持焦点。没有其他使用悬停或聚焦或任何与聚焦相竞争的东西。
我的最佳猜测是，这与我使用"；点击"；事件监听器，这是与焦点竞争的东西，但很明显，当我松开鼠标时，形式并没有消失，所以行为对我来说有点困惑。
请注意，我对JavaScript还很陌生，根据行为，我认为这不是正确的做法。我已经开始写一堆CSS(我也是新手(，目前我在顶部有一个基本的导航栏，里面装满了当我悬停在它们上面时会突出显示的锚标签，但我正试图将其作为一个跨度添加到导航栏中，这样它就会显示"；登录"；然后，当用户点击它时，span将变为登录/密码表单，而不会影响导航栏的其他组件。
也就是说，在美学上，除了这个焦点问题之外，一切似乎都按照我想要的方式进行。由于在这个最小的例子中这是一个问题，我假设它是一个独立于我编写的的其他代码的问题
提前感谢！
只需为您的输入定义一个Id，然后调用焦点函数。
const mySpan = document.getElementById('spanName');
mySpan.addEventListener('click', e =>{
document.getElementById('spanName').innerHTML = "<form><input type="text" id="myInput" placeholder="enter name"></input></form>";
document.querySelector("#myInput").focus();
})<html lang="en">
<head>
<title>Test</title>
<script defer src="index.js"></script>
</head>
<body>
<span id="spanName">Hi</span>
</body>
</html>在输入元素上添加.focus()会有所帮助，@Vinicius在他的回答中已经证明了这一点。
我修改了您的HTML，用<form>元素替换了您的<span>。为了使它表现得像一个span，我添加了一些display:inline-block样式。我还添加了一个.onsubmit处理程序，它将在您按下return后处理输入值。
document.getElementById('frmName').onclick = e =>{
const frm=e.target
frm.innerHTML = "<input type="text" placeholder="enter name">";
const inp=frm.children[0];
frm.onsubmit=ev=>(console.log("you entered:",inp.value),false)
inp.focus();
}form {display:inline-block; cursor: pointer}<html lang="en">
<head>
<title>Test</title>
</head>
<body>
abc<form id="frmName">Hi, click me!</form>def
</body>
</html>