Add image alt value to position of mouse when image dragged to text-area

Question

I have a text area that users can fill out on my website. Here is an example of what I want to do:

When users comment on other people's posts in this text area, they have a collection of emoji pictures at the top to select. I want the users to click on an emoji they want to choose (and then a border appear around it), then the user can click once in the text area where they would like text pasted. This text will be from the image's alt attribute. This saves the user time when writing emoji character codes.
I have attempted some of the code myself, but I am not sure about the JavaScript. Here is my attempt...

My CSS...

img:hover { 
    border:1px solid blue
} 

And my HTML...

<a href="#!"><img src="smiley1.png" alt="{smiley001}"><img src="smiley2.png" alt="{smiley002}"><img src="smiley3.png" alt="{smiley003}"><img src="smiley4.png" alt="{smiley004}"><img src="smiley5.png" alt="{smiley005}"></a><br>
<textarea id="comments" cols="50" rows="10"></textarea>

Is there a javascript/jquery solution to this?

If this is not possible, is there a way to do it with text instead of images, with the title attribute being copied to the textarea?

Answer 1

Check out this fiddle . I found an "insert at the mouse location" function from this question .

The rest is simple. Add a click event to save the alt attribute of whatever image the you clicked and another click event to the textarea so the alt code is inserted. It's just a matter of clicking the image and then clicking where you want the alt code to show up.

selected = '';

$('img').click(function(){
    console.log($(this).attr('alt'));
    selected = $(this).attr('alt');
});

$('#comments').click(function(){
    insertAtCaret('comments',selected)
    // Clear the selection so it isn't copied repeatedly
    selected = '';
});

// Copied from the linked answer
function insertAtCaret(areaId,text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0,strPos);  
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}

Answer 2

The basic javascript code should be something like:

function write_tag() {
var text = this.getAttribute("alt");
getElementById("textarea").innerHTML += text;
}

In this case, the text would be added at the end of the textarea content. A more complex code should check where is the cursor and attempt to insert the text into that point of the string.

The listener that triggers the function can be added in the image tag:

<img src="smiley1.png" alt="{smiley001}" onclick="write_tag()">

It would be cleaner to add the listener programatically, but it's another story: You should decide if you will have the javascript in the page or an external one, in that case you should wait for the entire page to load and then add listeners for all images. If you use jQuery, you can write something like this, assuming you have all your emojis into a div with the class "emojis":

$(document).ready(function(){
    $(".emojis img").bind("click",write_tag);
}

Answer 3

  var front = (txtarea.value).substring(0,strPos);  
 var back = (txtarea.value).substring(strPos,txtarea.value.length); 
 txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") { 
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart ('character', -txtarea.value.length);
    range.moveStart ('character', strPos);
    range.moveEnd ('character', 0);
    range.select();
}
else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
}

txtarea.scrollTop = scrollPos;

}