Question

我有以下jquery代码，应该在codepen上创建一个效果。为了更好地解释，页面以一个输入框开头。用户用文本填写该框，然后按＆＃34;输入＆＃34;生成第二个输入框，然后将光标放在该框中。

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>

更改焦点后，输入字段中的文本将消失

1 个答案: