将文本和 html unicode 字符添加到 textarea 元素答案

【问题标题】：Add text and html unicode characters to a textarea element将文本和 html unicode 字符添加到 textarea 元素
【发布时间】：2016-08-10 13:09:46
【问题描述】：

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

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

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

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

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

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，如果可以的话，让它变得更好，它可能会帮助其他被困在同一个地方的人

【问题讨论】：

标签： javascript jquery html unicode utf-8

【解决方案1】：

最近我遇到了同样的问题，想继续使用 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);

【讨论】：

【解决方案2】：

在 javascript 中处理 unicode 时，请使用 \u0000 而不是 &#x0000。

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

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

【讨论】：

我尝试换行以使用 unicode \u0000 但我在该行收到非法 TOKEN 错误，如果我将 \\ 插入的 unicode (\\u0000) 加倍，但作为文本而不是人物
也是同样的问题，我可以有文本或 unicode 我不能将它们结合起来
添加了基本版本问题的链接。问题就在那里，但只是没有样式
没有样式，因为 1）它是一个 unicode 字符，2）如果操作系统没有自动替换它，你需要像 Emoji One Chrome extension 这样的东西来为你做这件事，最后, 3) 它是一个文本区域，不能用图像替换 unicode 字符，因为文本区域将显示 HTML 而不是图像。
我遇到了 CSS 页面的样式比这更多

【解决方案3】：

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

因为主要问题是建议的解决方案涉及将 textarea 更改为 contenteditable-container。虽然乍一看这很好用，但这种方法的缺点是您需要解决占位符属性、可访问性问题（因为它不是“正确”输入）和选项卡问题。

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

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

https://jsfiddle.net/ay03mh6z/

【讨论】：