时间戳

首页 > 解决方案 > 如果我不按住鼠标左键单击，输入字段会失去焦点

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

问题描述

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

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

提前致谢！

标签： javascriptformsinput

解决方案

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

推荐阅读