.focus()不关注新元素

.focus() Not Focusing On New Element

本文关键字：元素 新元素 focus      更新时间：2023-09-26

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

  • 我修复了这个问题。它与事件处理程序有关。

你必须添加元素作为DOM的一部分

var input = document.createElement("input");
input.className = "Rename";
input.type = "text";
document.getElementById("somenode").appendChild(input);
input.focus(); // should work now

看小提琴

原因是由于您立即调用了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/

我通过改变重命名div以触发'mouseup'而不是'mousedown'的函数来修复这个问题。

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

我无法确认这是原因，但我知道代码工作后'mousedown'被更改为'mouseup'为Rename()的触发器。

相关文章：