javascript - 更改焦点后输入字段中的文本消失

Question

我有下面的 jquery 代码，应该可以创建像在 codepen 上一样的效果。为了更好地解释一下，该页面以一个输入框开始。用户用文本填充该框，然后按“Enter”键生成第二个输入框，然后将光标放在该框中。

ui_pc = 3001;
$(document).ready(function () {
  $("body").keydown(function(e){
    var press = e.which;
    press = press.toString();
    if(e.which=="13") {
      document.getElementById("main").innerHTML += "<div id=\"" + ui_pc + "\">"+ ui_pc+ " <input id=\""+ ui_pc+ "input\"></input></div>";
      document.getElementById(ui_pc+"input").select();
      ui_pc++;
    }
  });
});

当我运行此命令时，将创建下一个输入框并且光标移动。但是，每个输入字段中的所有文本都会被破坏。为什么会这样，如何解决？

编辑:请参阅此处的代码 http://schultheiss.io/lc3-web/

Answer 1

您可以使用 jquery 和 append() 来完成此操作，因为您正在更新每次重新创建的 .innerHTML 。您也可以修改代码，并使用 appendChild() DOM 方法

var ui_pc=0;
    $(document).ready(function () {
      $("body").keydown(function(e){
        var press = e.which;
        press = press.toString();
        if(e.which=="13") {
         $("#main").append( "<div id=\"" + ui_pc + "\">"+ ui_pc+ " <input id=\""+ ui_pc+ "input\"></input></div>"); 
         $('#'+ui_pc+"input").focus();
          ui_pc++;
        }

      });
 });

检查下面的代码片段

var ui_pc = 0;
$(document).ready(function() {
  $("body").keydown(function(e) {
    var press = e.which;
    press = press.toString();
    if (e.which == "13") {
      $("#main").append("<div id=\"" + ui_pc + "\">" + ui_pc + " <input id=\"" + ui_pc + "input\"></input></div>");
      $('#' + ui_pc + "input").focus();
      ui_pc++;
    }

  });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <input type="text" placeholder="start typing">
</div>