.focus（）不关注新元素

我有一个重命名某些div的函数。我试图得到它的工作方式是这样的：.focus（）不关注新元素

用鼠标右击格
用户单击“重命名”上下文菜单上
事业部得到一个input元素，并自动聚焦
按输入或点击屏幕后输入提交

我有大部分的步骤完成，但输入元素没有被点击后，我点击'重命名'。下面的代码：

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可能有帮助，但我更感兴趣的是找出为什么这是行不通的。
我修复了这个问题。它与事件处理程序有关。我的答案张贴在下面。

来源

2013-05-13 tay10r

@tadman jQuery？这到底是什么？这就像说*为什么你首先不使用CodeIgniter。它很难得到错误。* – 2013-05-13 21:36:36

你似乎对我很好[这里]（http://jsbin.com/epeyoy/1/）。 – 2013-05-13 21:41:00

我没有使用它，以便更好地理解纯JavaScript。我真的不想在这里辩论是否我应该使用jQuery – tay10r 2013-05-13 21:41:00

原因是，因为您立即调用选择和焦点方法。浏览器没有机会插入元素，所以它不是DOM的一部分。

一个快速和肮脏的解决方案是使用setTimeout -function以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/

来源

2013-05-13 21:34:45 Kenneth

哦，对不起，我没有提到我从类似问题中看到的那样。没有太大的帮助 – tay10r 2013-05-13 21:36:27

在做这件事之前，innerHTML有什么价值？你确定它不会破坏你的textnox吗？ – Kenneth 2013-05-13 21:37:31

innerHTML之前只是一个文件名（即

testFile.c

– tay10r 2013-05-13 21:45:30

你必须添加元素的DOM

的一部分

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

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

看到the fiddle

来源

2013-05-13 21:35:24

我不确定为什么，但它仍然无法工作，我可能会发布更多代码如果我不能工作 – tay10r 2013-05-13 21:44:18

@TaylorFlores检查我的更新的答案中的小提琴。为我工作。 – 2013-05-13 21:46:51

是的，它的工作原理，但我有问题在我的网页上使用它。我会很快发布小提琴 – tay10r 2013-05-13 21:48:24

我通过改变重命名要在“鼠标松开”引发的div而不是“鼠标按下”功能解决了这一问题。

我认为这是造成问题的原因是因为Rename（）函数在mousedown上被触发，导致焦点在'mousedown'期间被设置，但contextmenu直到'mouseup'才被隐藏。

我无法确认这是原因，但我确实知道在将'mousedown'更改为'mouseup'后，代码在Rename（）的触发器中起作用。

来源

2013-05-14 00:42:18 tay10r

我觉得有点不好，因为没有人可以回答这个问题，因为我没有发布整个代码。对于那个很抱歉！ – tay10r 2013-05-14 00:46:21

感谢您花时间发布您的解决方案。 – RichieHindle 2013-05-14 07:05:24

.focus（）不关注新元素

回答

相关问题