Question

我尝试创建一个可编辑的表格。出于某种原因，我无法将注意力集中在我生成的输入上。为了更好的理解，我为你写了一个小版本。

出于某种原因，此代码适用于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();

非常感谢大家！

Answer 1

删除autofocus并使用$('<input />')创建一个正确的元素，一旦将其附加到DOM，请使用focus()。

autofocus用于稍后在DOM中附加的元素时会被认为是不可靠的，因为它只能用于将元素聚焦在页面加载等上。

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

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

FIDDLE

浏览器不会将焦点设置为生成的输入

1 个答案: