4

我有重命名某些 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 可能会有所帮助，但我更感兴趣的是找出为什么这不起作用。

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

4

3 回答 3

4

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

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

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

看小提琴

于 2013-05-13T21:35:24.803 回答
2

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

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

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/

于 2013-05-13T21:34:45.787 回答
1

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

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

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

于 2013-05-14T00:42:18.287 回答