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

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

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

Solution 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).

Comments

[Paul Ledger]

I tried swapping the line to use the unicode \u0000 but i get an illegal TOKEN error on that line, if i double \\ the unicode (\\u0000) it inserts but as text instead of the charactor

[Paul Ledger]

also the same problem, i can have text or unicode I cant combine them both

[Paul Ledger]

Added a link to the question for a basic version. The problem is there but theres just no styling to it

[Mottie]

There is no styling because 1) it is a unicode character, 2) if the OS doesn't automatically replace it, you'll need something like the Emoji One Chrome extension to do that for you and lastly, 3) It's a textarea, you can't replace a unicode character with an image because the textarea will show the HTML instead of the image.

[Paul Ledger]

I met CSS the page is more styled than that

[Paul Ledger]

Fixed it but JSFiddle, could tool for working on js functions thanks