javascript - 在更改输入文本时在文本区域中插入数据

Question

这是我的代码，运行良好，但是当我从文本区域中删除一些字符时，它停止工作!!!

$(function() {
  $('#inputnumserie').keyup(function() {
    var numserie = $(this).val();
    $('#test2').append($('#inputnumserie').val())
    $('#inputnumserie').val('');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="inputnumserie" id="inputnumserie" style="text-align:right;" size="14">
<textarea id="test2"></textarea>

Answer 1

使用append，您只是在文本区域内插入节点，这似乎是一种有问题的方法，当您的问题发生时，文本不会显示，但它仍然插入到 DOM 上 - 使用检查器工具检查--- .

基于this answer的解决方案，可以更新文本区域的 val() 而不是追加节点。

$(function() {
  $('#inputnumserie').keyup(function() {
    var numserie = $(this).val();
    $('#test2').val(function(i,text) {
      return text + numserie;
    });
    $('#inputnumserie').val('');
  });
});

textarea {
  display:block;
  width:80%;
  height:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="inputnumserie" id="inputnumserie" style="text-align:right;" size="14">
<textarea id="test2"></textarea>