Pedro Cordeiro Pedro Cordeiro - 2 months ago 8
HTML Question

Insert data in textarea on change input text

Here is my code and is running well but when i delete some character from textarea it stop working!!!



$(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

With append you are just inserting nodes inside the textarea and seems like a buggy approach, when your issue happens the text doesn't show but it's still inserted on the DOM -- Check with inspector tools --- .

The solution based on this answer, could be update the val() of the textarea instead of append nodes.

$(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>