javascript - .focus() 不关注新元素

Question

我有一个重命名某些 div 的函数。我试图让它工作的方式是这样的:

• 用户右键点击div
• 用户点击上下文菜单中的“重命名”
• div 获取输入元素并自动聚焦
• 输入在按下回车键或点击屏幕后提交

我已完成大部分步骤，但在我单击“重命名”后输入元素未获得焦点。这是代码:

function Rename( ){
    ClickedFile.innerHTML = "<input class='Rename' type='text' value='" + ClickedFile.innerHTML + "'>";
    ClickedFile.childNodes[0].focus();
}

ClickedFile 是被右键单击的节点。更改 innerHTML 工作正常但 .focus() 没有，我不确定为什么。我也没有在控制台上收到任何错误。

我也尝试过使用:

ClickedFile.childNodes[0].select();
ClickedFile.childNodes[1].focus();
ClickedFile.focus();

他们都没有工作。

编辑:

• 我知道使用 JQuery 可能会有帮助，但我更感兴趣的是找出它不起作用的原因。

• 我解决了这个问题。它与事件处理程序有关。我的答案贴在下面。

Answer 1

您必须将元素添加为 DOM 的一部分

var input = document.createElement("input");
input.className = "Rename";
input.type = "text";

document.getElementById("somenode").appendChild(input);
input.focus(); // should work now

参见 the fiddle