Question

我有textarea用于在用户输入时添加文本和表情符号。为了让表情符号起作用，我有用户可以点击或使用用户设备键盘上的默认值的图像。目前我可以输入框或使用emjois，我不能同时做到这两点。

要获取字符的unicode，我必须将unicode字符串添加到textarea，如：

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

我遇到的问题是当我在插入这些文本之前或之后输入框时，可以通过.val()或value属性访问文本，并且可以通过.html()或{访问Unicode字符{1}}属性。

有没有办法可以将文本作为HTML而不是作为值输入到textarea中，或者是否可以在同一个textarea中组合unicode字符和文本。

JS Fiddle问题

管理来解决问题，有很多事情需要改变，最重要的是将textarea改为这让事情变得容易了

这是一个小提琴，

FIXED VERSION

不能得到所有的信任，这些问题的答案有帮助

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?

它不是最好的编码，可能会做得更好，随时编辑fiddle如果可以的话可以帮助其他人陷入同一个地方

Answer 1

在javascript中处理unicode时，请使用\u0000代替&#x0000。

您可能还想在插入符号处插入字符...我最近创建了一个用户脚本，为GitHub注释做了同样的事情（您可能想查看代码） - GitHub Custom Emojis。它使用At.js添加自动完成下拉菜单，负责为您插入插入符号文本。

更新：使用contenteditable div是一种更好的方法，因为它允许您插入图像（demo）。现在的问题是代码使用.html()来添加内容。相反，需要将其更改为使用rangy之类的内容在插入符号处插入HTML或替换用户选择的文本。一旦插入图像并添加更多文本（text <img> text），您将在此更新中链接的演示中看到问题。

Answer 2

最近，我遇到了同样的问题，并希望继续使用textarea和纯JavaScript。解决方案是在临时div中预先渲染图释，并将textarea值与渲染的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 3

虽然这个问题有点老了，但我想添加一个替代解决方案，不用更改原始html。

主要问题是建议的解决方案涉及将textarea更改为contenteditable-container。虽然这看起来很好用，但这种方法的缺点是你需要一个解决方法来解决占位符属性，可访问性问题（因为它不是'正确的'输入）和标签问题。

稍微改写一下，你仍然可以使用textarea，结合val（[...]）函数，以及作为代理对编写的表情符号：

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

https://jsfiddle.net/ay03mh6z/

将text和html unicode字符添加到textarea元素

3 个答案: