Question

我有一个输入和textarea，我在输入上捕获输入并且我将该行附加到textarea，这很好用，但是当我直接在textarea上制作一些版本时删除或插入一些文本，程序插入不再工作。我怎样才能解决这个问题？

我已经在Chrome 53，Firefox 49.0.2和Opera 40中对此进行了测试，因此它似乎不是浏览器问题。这是我尝试使用的代码：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<input type="text" id="entry" name="entry"><br>
<textarea id="result" rows="10"></textarea>

<script type="text/javascript">
$("#entry").on("keyup", function(e){
  if (e.keyCode == 13){
    $("#result").append( $("#entry").val()+"\n");    
    $("#entry").val("");
  }
});
</script>

＆＃13;

Answer 1

让textarea不丢失值的引用的一种方法是保存它，然后连接新条目的现有值，参见下面的示例：

$("#entry").on("keyup", function(e){
  if (e.keyCode == 13){
    var text = $("#result").val();
    $("#result").val( text +  $("#entry").val()+"\n");    
    $("#entry").val("");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<input type="text" id="entry" name="entry"><br>
<textarea id="result" rows="10"></textarea>

Answer 2

您也可以jQuery#val-function：

＆＃13;

$("#entry").on("keyup", function(e){
  if (e.keyCode == 13){
    $("#result").val(function(i, txt) {
      return txt + $("#entry").val() + "\n";
    });
    $(this).val('');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" id="entry" name="entry"><br>
<textarea id="result" rows="10"></textarea>

＆＃13;

如何在手动修改内容后将内容附加到文本区域

2 个答案: