how to copy title attribute of a to text area using jQuery

Question

I am adding smilies to my comments

for which i using following code

      <span class="smilies" id="angry" title="X-("></span>

where

.smilies{
background: url("../images/smilies-sprite.png");
display: inline-block;
height: 22px;
margin-bottom: -7px;
width: 24px;
}

#angry{
  background-position: -70px -10px;
}

I want that when somebody click on id=angry the title attribute of id=angry shell be copied to my comments textarea

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

`$('.smilies').click(function(){$('#comments')[0].value += this.title;});`, basically. Do you want to overwrite the textarea's contents, or add it at the caret's position? — Rob W, Jan 18 '12 at 12:33
And what exactly do you have problems with? [How to bind a click event handler](http://stackoverflow.com/search?q=jquery+how+to+bind+click+event+handler&submit=search), [how to read an attribute](http://stackoverflow.com/questions/8087093/jquery-get-a-custom-made-up-attribute-value) or [how to set the content of a textarea](http://stackoverflow.com/questions/415602/set-value-of-textarea-in-jquery)? — Felix Kling, Jan 18 '12 at 12:38

score 1 · Answer 1 · answered Jan 18 '12 at 12:32

1

$("#angry").click(function(){
 $("#comments").val($(this).attr("title"));
});

answered Jan 18 '12 at 12:32

Umesh Patil

10,475
16
52
80

score 1 · Accepted Answer · answered Jan 18 '12 at 12:33

1

This should do it and work for any smilies

$('span.smilies').on('click', function() {
    var comments = $('#comments');
    comments.val(comments.val() + $(this).attr('title'));
});

http://jsfiddle.net/infernalbadger/JVDES/

answered Jan 18 '12 at 12:33

Richard Dalton

35,513
6
73
91

score 1 · Answer 3 · answered Jan 18 '12 at 12:34

1

to add it to the end of the current textarea line you could do something like

$('#angry').click(function(){

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

});

However the better one would be to look up the caret insert stuff. that way you can insert at the caret (blinking line). Google it, there should be a lot of info about it. BBCode editors is what you will probably want to look at.

answered Jan 18 '12 at 12:34

Lee

10,496
4
37
45

+1 for being the only person to mention the carat issue. This is the REAL problem the OP will come up against. I'm not familiar with BBCode, but Rangy is another option. – maxedison Jan 18 '12 at 12:36
BBCode is the term often used to describe a text input where you can use tags like [b] [/b] for bolding text. they often include smiley code too. Used frequently on forums to provide limited but safer text decorating, layout and linking – Lee Jan 18 '12 at 12:39

score 0 · Answer 4 · edited Jan 18 '12 at 13:39

0

This is an example. On click event will set the value of the title

$('#angry').click(function() {
  $('#comments').val($(this).attr('title'));
});

edited Jan 18 '12 at 13:39

radu florescu

4,315
10
60
92

answered Jan 18 '12 at 12:32

techfoobar

65,616
14
114
135

1

you are very quick, but commentsis not a class here :) – Umesh Patil Jan 18 '12 at 12:34

score 0 · Answer 5 · answered Jan 18 '12 at 12:35

0

$('#angry').click(function() {
  $('#comments').val($('#comments').val() + $('#angry').attr('title'));
});

answered Jan 18 '12 at 12:35

tim

9,896
20
81
137

how to copy title attribute of a to text area using jQuery

5 Answers5