Javascript - Paste specific text to textarea on button click

Question

I new in Javascript. I'm working on my Django project and I want to add some buttons like img button. Here is example:

So when user will click img button in textarea will be added this text :

<img src="[YOUR IMAGE]">

Thanks for help.

not enought information to help you out. If you are talking about insterting img tag inside textarea it's not possible ........ no html tag is supported inside textarea... check this out https://stackoverflow.com/questions/4705848/rendering-html-inside-textarea — Akki619, Jul 26 '17 at 09:02
Thanks all for help. I've found solution here: https://stackoverflow.com/questions/17816924/how-to-add-text-to-textarea-when-user-clicks-a-button — jestembotem, Jul 26 '17 at 09:34

score 0 · Answer 1 · answered Jul 26 '17 at 09:11

If i understand your question correctly you have to call a function in javascript to write to your specified element and on your image you use a onclick.

something like:

onclick="document.location=this.id+'.html'

Sample:

$(function(){
    var $display = $('#display');
    $display.val(0);

    $(document).on('click', 'button.number', function(){
        if($display.val() != 0) {
            $display.val($display.val() + $(this).val());
        } else {
            $display.val($(this).val());
        }

    });
});

JS Fiddle Link: http://jsfiddle.net/qohdjovu/

This was probably already answered here: Using jQuery to click the button and display the value of the button

Script function was made by: @R. Canser Yanbakan

score 0 · Answer 2 · answered Jul 26 '17 at 09:14

You need more than an image if you're not aware of it already. I suggest using Glyphicons for that purpose, will simplify everything and will be more lightweight.

Say we use the fontawesome glyphs.

Create a bar above text area where you'll hold your controls,

  <section> 
       <i id="control-bold" class="fa fa-bold" aria-hidden="true"></i>
       <i id="control-italic" class="fa fa-italic" aria-hidden="true"></i>
    </section>
<textarea id="textarea"></textarea>

For simplicity I used ids on the button control elements, and will use JQuery to listen to click events to make it even more simple.

$("#control-bold").click(function(){
   //  Bold was clicked append {bold} to text area with whatever..
   $("#textarea").append("{bold}");
});

$("#control-italic").click(function(){
   //  Italic was clicked append {bold} to text area with whatever..
   $("#textarea").append("{bold}");
});

Note this is a simple & basic example to get you started. Glyphicons and JQuery are only my suggestion for this question.

score 0 · Answer 3 · answered Jul 26 '17 at 09:35

If you are looking for a way to change your button style, I will suggest you to use CSS instead of <img> HTML tag.

a CSS class/id for unselected button with the default background-image
a CSS class/id which override background-image or selected buttons

And you will add/remove classes using javascript element.classList.add('.selected') or element.classList.remove('.selected')

Javascript - Paste specific text to textarea on button click

3 Answers3