Add text and html unicode characters to a textarea element

Question

I have textarea that I am using to add text and emojis when a user types. To get the smileys to work I have images that users can click or use the default on a users device keyboard. At the moment I can type in the box or use the emjois, I cant do both.

To get the unicode for the characters I have to add the unicode string to the textarea like:

var t = $('#msgWriteArea').html() + '&#x'+ code;
$('#msgWriteArea').html(t);

The problem I am having is when I type in the box before or after I insert these the text is accessible through the .val() or value attribute and the Unicode characters are accessible through the .html() or innerHtml attribute.

Is there a way I can input text into a textarea as HTML instead of as a value or is there a way I can combine unicode characters and text in the same textarea.

JS Fiddle of the problem

Managed to fix the problem, there was quite a few things to change most importantly changing textarea to That made things a lot easier

Heres a fiddle,

FIXED VERSION

Cant take all the credit, the answers for these questions helped

Insert text into textarea with jQuery

Get caret position in contentEditable div

How to set caret(cursor) position in contenteditable element (div)?

How to replace selected text with html in a contenteditable element?

Its not the neatest coding and probably could be done better, feel free to edit the fiddle make it better if you can it may help others who are stuck in the same place

Answer 1

Recently I had the same problem and wanted to stay with textarea and pure javascript. The solution is to pre-render an emoticon in a temporary div and replace the textarea value together with the rendered HTML

let msg = document.getElementById('textareaID').value;
let g = document.createElement('div');
g.innerHTML = '&#x1f609';
let z = g.innerHTML;

document.getElementById('textareaID').value = msg + '' + z;

delete(g);

Answer 2

Although this question is a bit older, I would like to add an alternative solution without changing the original html.

Beause the main problem is that the proposed solution involves changing a textarea into a contenteditable-container. While this works nicely at first sight, downside of this approach is that you need a workaround for the placeholder attribute, accessibility problems (as it is not a 'proper' input), and tabbing issues.

With a slight rewrite you can still use the textarea, combined with the val([...]) function, and the emojis written as surrogate pairs:

    $('textarea').val($('textarea').val() + ' ' + emoticon);

https://jsfiddle.net/ay03mh6z/

Answer 3

When dealing with unicode in javascript, use \u0000 instead of &#x0000.

You might also want to insert the characters at the caret... I recently created a userscript that does this same thing for GitHub comments (you might want to check out the code) - GitHub Custom Emojis. It uses At.js to add an autocomplete dropdown which takes care of the insertion of text at the caret for you.

---

Update: Using a contenteditable div is a better way to go as it allows you to insert the image (demo). The problem now is that the code is using .html() to add the content. Instead, it will need to be changed to use something like rangy to insert the HTML at the caret or replace user selected text. You'll see the problem in the demo I linked in this update once an image is inserted and more text is added (text <img> text).