smilies to textarea on click

javascript jquery html onclick textarea

16,941

Solution 1

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.

Solution 2

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

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

Solution 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/

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(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/

Solution 4

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

View more solutions

16,941

Author by

bernte

Updated on June 04, 2022

Comments

bernte almost 2 years

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

Liyan Chang almost 12 years

Ah. I must have skipped the portion about the cursor. The above answers all seem good and the cited thread <stackoverflow.com/questions/1891444/…> was a good read as well.
bernte almost 12 years

I added a comment to my question! There is still a small problem with your code. Thanks for your fast response! regards berni
bernte almost 12 years

I added a comment to my question! There is still a small problem with your code. Thanks for your fast response! regards berni
bernte almost 12 years

I added a comment to my question! There is still a small problem with your code. Thanks for your fast response! regards berni
Victor almost 12 years

@bernte, I updated my answer and added new function which set the cursor into the textarea.
bernte almost 12 years

that is perfect! Thank you! i tried to add a space between the str but than the cursor isn't in the right position. do you have any idea? i don't know if my changes do match. CHANGED: TextArea.value = before + " " + str + " " + after; the coursor is between the : and the ) - jsfiddle.net/JVDES/15
Victor almost 12 years

@bernte The problem is that you add 2 more characters (spaces) to field, but to setCursor() function you don't send "them" (means str length). In this case, you need to add spaces to str before assign it to textarea and send to setCursor() function. See example.
Pars over 10 years

There is a problem on Chrome, while you click frequently on Smilies, each new smiley goes BEFORE the others!!
Youssef over 6 years

I think you should use .prop("selectionStart") instead of .attr("selectionStart")