Geek Answers Handbook

Paste emoticon at cursor position

I am creating a project in which users can click on emoticons and they will be inserted into the content div.

  • I want three divs and in any div I, the emoticon should insert into the div.
  • Also, the problem here is that emoticons are only inserted at the end of the div. I want the emoticon to be entered only where there is a cursor.

Note: make sure the emoticon size should remain the same in all divs.

<div id="text_wrapper"> <div id="text" contentEditable="true" hidefocus="true"></div> </div> <div id="text_wrapper"> <div id="text1" contentEditable="true" hidefocus="true"></div> </div> <div id="text_wrapper"> <div id="text2" contentEditable="true" hidefocus="true"></div> </div> <span id="button">Add Emoji</span> 
 $("#button").click(function() { $("#text").append('<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>'); });


Demo

+2
source share
1 answer

First: Insert one of the three elements into the right:

You use the #text expression, which refers to the first editable div.

If you want to target an object with the last focus on it, you can use classes to do this.

Add a class to them, so you can easily target any of them.

 <div id="text_wrapper"> <div id="text" class="editable" contentEditable="true" hidefocus="true"></div> </div> <div id="text_wrapper"> <div id="text1" class="editable" contentEditable="true" hidefocus="true"></div> </div> <div id="text_wrapper"> <div id="text2" class="editable" contentEditable="true" hidefocus="true"></div> </div> <span id="button">Add Emoji</span>

Then you can easily decide where the focus is with a single event listener

 $( document ).on( "click focusin" , ".editable" , function(){ $( ".editable" ).removeClass( "focus" ); $( this ).addClass( "focus" ); } );

From now on, the focused element (the one that has a pointer) will have the class. Focus.

Now you can use

 $( document ).on( "click" , "#button" , function() { $( ".editable.focus" ).append( '<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>' ); });



Second: insert at cursor position

This seems a little more complicated, but there are pretty clean ways. Take a look at this section .

+4
source

More articles:


All Articles