Adding an emoji to input field when clicked

Question

I am trying to insert the emoji(s) into my input field called #usermsg when it is clicked.

The emoji does not show up in the input field.

I have added .clone() to the jQuery function so that the emoji would not disappear when clicked.

HTML emoji:

<a id="smiley" title="smiley" href="#" >&#128515;</a>

HTML input field:

<input name="usermsg" type="text" id="usermsg"/>

jQuery function:

//Add emoji when clicked
$("#smiley").click(function(){
    $('#smiley').clone().append('#usermsg');
  });

I've tried adding .val(); after the .append('#usermsg'); However this still does not work for me.

If someone could lead me in the right direction.

Thank you.

This works, thank you. However when clicked multiple times it only shows one emoji in the input text. Is it possible have it insert one emoji per click? — Zaedian, Mar 08 '18 at 12:48
@Alexis did you mean $('#usermsg').append().val($('#smiley').html()); It still does the same for me. — Zaedian, Mar 08 '18 at 13:00
@Sean take a look on this post :) https://stackoverflow.com/questions/841722/append-text-to-input-field — Alexis, Mar 08 '18 at 13:14
@Alexis Thank you for the quick response, I checked out the post and got it to work! — Zaedian, Mar 08 '18 at 13:19

score 0 · Accepted Answer · answered Mar 08 '18 at 13:23

0

Answer with help from @guradio and @Alexis

Change:

$('#smiley').clone().append('#usermsg');

To:

$('#usermsg').val($('#usermsg').val() + $('#smiley').html());

answered Mar 08 '18 at 13:23

Zaedian

1 Answers1