smilies to textarea on click

Question

I have a little question

I want to click on my smileys and insert the text to the textarea. and when I want to add a smiley later, the smiley should be added to the cursor position and not at the end in the textarea.

This is my html code:

<textarea id="description" name="description"></textarea>

<div id="emoticons">
    <a href="#" title=":)"><img alt=":)" border="0" src="/images/emoticon-happy.png" /></a>
    <a href="#" title=":("><img alt=":(" border="0" src="/images/emoticon-unhappy.png" /></a>
    <a href="#" title=":o"><img alt=":o" border="0" src="/images/emoticon-surprised.png" /></a>
</div>

This is my JS code:

$('#emoticons a').click(function(){

    var smiley = $(this).attr('title');
    $('#description').val($('#description').val()+" "+smiley+" ");

});

Here you can see the result (NO WRAP - BODY) http://jsfiddle.net/JVDES/8/

I use an extern JS file for my javascript-code...
Do you know why the code isn't running in NO WRAP - HEAD mode? http://jsfiddle.net/JVDES/9/

Thanks for helping

Regards bernte

Answer 1

try also this...

$('#emoticons a').click(function() {

    var smiley = $(this).attr('title');

    var cursorIndex = $('#description').attr("selectionStart");
    var lStr =  $('#description').val().substr(0,cursorIndex);
    var rStr = $('#description').val().substr(cursorIndex);

    $('#description').val(lStr+" "+smiley+" "+rStr);

});

Fix after your comment:

​

$('#emoticons a').click(
function(){var smiley = $(this).attr('title');

var cursorIndex = $('#description').attr("selectionStart");
var lStr =  $('#description').val().substr(0,cursorIndex) + " " + smiley + " ";
var rStr = $('#description').val().substr(cursorIndex);

$('#description').val(lStr+rStr);
$('#description').attr("selectionStart",lStr.length);                                     
});​

​

Answer 2

Also, you can use something this function:

function ins2pos(str, id) {
   var TextArea = document.getElementById(id);
   var val = TextArea.value;
   var before = val.substring(0, TextArea.selectionStart);
   var after = val.substring(TextArea.selectionEnd, val.length);
   TextArea.value = before + str + after;
}

For your example, look here.

UPD 1:

To set cursor at specified position, use the next function:

function setCursor(elem, pos) {
   if (elem.setSelectionRange) {
      elem.focus();
      elem.setSelectionRange(pos, pos);
   } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
   }
}

I updated code on jsFiddle, so, to view new example, look here.

Answer 3

The difference between no wrap (head) and no wrap (body) is that the former will run the code as soon as possible and the latter will run the code after the page has loaded.

In this case, with no wrap (head), the code is being run before '#emoticons a' exists. Thus $('#emoticons a') returns none and does not attach the click handler. Later, the link is created.

Thus, the solution is to tell the code to run when the page is loaded.

There are a couple, equivalent ways of doing this. http://api.jquery.com/ready/

1. $(document).ready(handler)

2. $().ready(handler) (this is not recommended)

3. $(handler)

So using version 3, we have:

$(function() {
    $('#emoticons a').click(function(){

    var smiley = $(this).attr('title');
    $('#description').val($('#description').val()+" "+smiley+" ");

    });
});

http://jsfiddle.net/Nc67C/

Answer 4

Try this - http://jsfiddle.net/JVDES/12/

Credit for the caret position function goes to - https://stackoverflow.com/a/1891567/981134