40265

Append INPUT to TEXTAREA as being typed in JQuery

I have an INPUT text box.

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

<hr>

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

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

Answer1:

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; }); });
    <li>Working Example here add <strong>/edit</strong> to the URL to play with the example</li> </ul>

    Answer2:

    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 });

    Answer3:

    $('#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; });

Recommend

  • cblas_dgemm - works ONLY if (beta) is power-of-two
  • jQuery dynamic image loading
  • Preventing ctrl+z in browser
  • Control key + click event on google map
  • Where can I get runkit DLL extensions for PHP 5.3+?
  • How does Skobbler prioritize which POIs to show?
  • Play 2.0.4 file upload. NullPointerException: null
  • android duplicate provider authority on apps that don't have provider
  • Error while re-opening sound file in python
  • How to save dynamically created textboxes and their values
  • Invert string in Rust
  • Action Pack components in Rails
  • What is the difference between a “service account” and an “installed application”?
  • Knockout custom binding handler
  • Clear fused location provider's location for testing
  • Calculate time difference in hh:mm:ss with simple javascript/jquery
  • Group list of tuples by item
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • How to add a focus style to an editable ComboBox in WPF
  • Limiting recursion to certain level - Duplicate rows
  • jQuery .attr() and value
  • Email format validation in mvc3 view
  • jQuery show() function is not executed in Safari if submit handler returns true
  • javascript inside java/jsp code
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Adding custom controls to a full screen movie
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • using HTMLImports.whenReady not working in chrome
  • How to stop GridView from loading again when I press back button?
  • How to get Windows thread pool to call class member function?
  • Authorize attributes not working in MVC 4
  • apache spark aggregate function using min value
  • EntityFramework adding new object to nested object collection
  • Is there any way to bind data to data.frame by some index?
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?