Question

我有一个重命名某些div的功能。我试图让它工作的方式是这样的：

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

我完成了大部分步骤，但点击“重命名”后输入元素没有被聚焦。这是代码：

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的一部分。

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

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'之前没有隐藏contextmenu。 / p>

我无法确认原因，但我确实知道代码在'mousedown'之后的工作被更改为'mouseup'以触发Rename（）。

.focus（）没有关注新元素

3 个答案: