如果我不按住鼠标左键单击，输入字段会失去焦点答案

【问题标题】：Input field loses focus if I don't hold down left-mouse click如果我不按住鼠标左键单击，输入字段会失去焦点
【发布时间】：2023-03-02 22:44:01
【问题描述】：

这是 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（我也是新手），我目前在顶部有一个基本的导航栏，上面有一个锚标签，当我将鼠标悬停在它们上面时会突出显示，但我正在尝试将它添加到导航栏作为一个跨度，以便它显示“登录”，然后当用户单击它时，跨度将更改为登录/密码表单，而不会影响导航栏的其他组件。

也就是说，除了这个焦点问题之外，从美学上讲，一切似乎都按照我的意图进行。由于这是这个最小示例中的问题，我假设这是一个独立于我编写的其他代码的问题

提前致谢！

【问题讨论】：

附注：我通常会通过document.createElement 创建一个form 元素并在其中添加所有内容，而不是使用innerHTML。它使您可以更好地控制元素并使其更易于理解。

标签： javascript forms input

【解决方案1】：

只需为您的输入定义一个 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>

【讨论】：

【解决方案2】：

在输入元素上添加.focus() 会有所帮助，正如@Vinicius 在他的回答中所展示的那样。

我稍微修改了您的 HTML，将您的 <span> 替换为 <form> 元素。为了让它表现得像一个跨度，我添加了一些display:inline-block 样式。我还添加了一个.onsubmit 处理程序，它将在您按下回车后处理输入值。

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>

【讨论】：