javascript - 浏览器未将焦点放在生成的输入上

我尝试创建一个可编辑的表。由于某种原因，我无法将重点放在生成的输入上。我为您写了一个小版本，以使您更好地理解。

由于某种原因，此代码在Chrome中有效，但在Firefox中无效。如果代码变得更复杂，它也无法在chrome中工作。有什么想法可以使我专注于输入吗？

HTML：

<article>
  <div>value1</div>
  <div>value2</div>
  <div>value3</div>
  <div>value4</div>
</article>

CSS：

div {
    width: 200px;
    padding: 5px;
    border: 1px solid green;
  }

Javascript：

$(document).ready(function() {
    var currentTarget = false;
    $(document).keydown(function(e) {
      switch(e.keyCode) {
        case 9:
        if(currentTarget != false) {
          save();
          moveRight();
          edit(currentTarget);
        }
        break;
      }
    });
    $("div").dblclick(function() {
        if(currentTarget != false) {
            save();
        }
      edit($(this));
      currentTarget = $(this);
    });
    function moveRight() {
      currentTarget = currentTarget.next();
    }
    function edit(target) {
        var text = target.text();
        target.html('<input type="text" id="changeEdit" value="'+text+'" autofocus />');
    }
    function save() {
      currentTarget.html($("#changeEdit").val());
    }
  });

jsfiddle链接：click me

编辑

解：
Adeneo显示了添加输入元素的更好形式。但是正确的答案是zgood在评论中做出的。

为了防止TAB进行应做的事情，您必须使用以下功能：

e.preventDefault();

非常感谢大家！

最佳答案

删除autofocus并使用$('<input />')创建适当的元素，并将其附加到DOM后，使用focus()。

当在DOM中稍后附加的元素上使用autofocus时，它是不可靠的，因为它只能用于将元素集中在pageload等上。

function edit(target) {
    var input = $('<input />', {
        type  : 'text',
        id    : 'changeEdit',
        value : target.text()
    });

    target.html( input );
    input.focus();
}

FIDDLE