Insert image in textarea when button is pressed using javascript or jquery?

i have design one textarea and button in html. i want to insert image in textarea when button is pres开发者_开发问答sed. how it is possible in javascript or jquery?

Textareas can only contain text.

Textareas can only contain text, but you can overlap elements. Here is an example: http://jsfiddle.net/2qMb3/1/

This uses a styled div instead of an image, but you can easily use an image instead of the div.

You might want to look into using a WYSIWYG editor such as TinyMCE or CKEditor.

As other said TextArea only contains Text but, you can try something like this:

<textarea id="x" rows="5" cols="20">hellooo</textarea>

$('#buttonId').click(function(){
    $('#x').css('background',urlOfImage)
});

Here is a working example; you have to manipulate it according to your requirements.

You can use jQuery to add simple CSS to the textarea on click

The HTML

<textarea id="message" rows="2" cols="20"></textarea>
<input type="button" value="Add image to textarea" id="add_image" />

The CSS:

<style>
#message{
  padding-left : 30px; // This will prevent the text from overlapping the image
}
#add_image{
 display: block; //just making the button appear in its own line
}
</style>

The Javascript:

<script>
$(document).ready(function() {
    $('#add_image').click(function() {
      $('#message').css({
          'background' : 'url(http://lorempixel.com/20/40) no-repeat',
      });
    });
});
</script>

See it in action: http://jsfiddle.net/gksTQ/