Append INPUT to TEXTAREA as being typed in JQuery

Question

I have an INPUT text box.

As someone types into the INPUT text box, i need it to append/add-to a TEXTAREA value.

---

Lets say user types '12345' into the text box.

The textarea (default value="Comment: ") will automatically add: 'Comment: 12345'. Adding '12345' as they type.

Answer 1

Russ Cam is missing an edge case -- you can drag and drop text into and within input fields by highlighting and dragging, which his code does not account for.

Below code that covers this case:

$(function() {

  var areaText = $('#area').val();  

  $('#text').bind('keyup keypress drop', dropfunction() { 
      $('#area')[0].value = areaText + $(this)[0].value;
  });

});

That said, there is still another edge case, which is deleting and manipulating via context menu. As of right now I can't see a way to detect the selection of context menu interaction... You could disable it if that is important using the following code

$('#text').bind('contextmenu', function() { 
    return false
});

Answer 2

Assuming area is the id of your textarea and text the id of your textbox,

$(function() {

  var areaText = $('#area').val();  

  $('#text').bind('keyup keypress', function() { 
      $('#area')[0].value = areaText + $(this)[0].value;
  });

});

• Working Example here add /edit to the URL to play with the example

Answer 3

$('#your_input').bind('keypress', function(event) { 
    var char_code = event.which ? event.which : window.event.keyCode;
    var char = String.fromCharCode(char_code);
    $('#your_textarea').value += char;
});