.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

Answer 2

原因是因为您会立即调用 select 和 focus 方法。浏览器还没有机会插入该元素，因此它不是 DOM 的一部分。

一个快速而肮脏的解决方案是使用值为 0 毫秒的setTimeout-函数：

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

这会导致浏览器完成它必须做的所有事情，然后运行你传递给setTimeout的函数

以下小提琴显示您的示例处于工作状态：http://jsfiddle.net/Kennethtruyers/fX8h6/

Answer 3

我通过更改重命名要在“mouseup”而不是“mousedown”上触发的 div 的函数来解决问题。

我认为这是导致问题的原因是因为在 mousedown 时触发了 Rename() 函数，导致在“mousedown”期间设置焦点，但直到“mouseup”才隐藏上下文菜单。

我无法确认这就是原因，但我知道代码在“mousedown”更改为“mouseup”以触发 Rename() 后有效。