在文本区域元素中添加文本和HTML Unicode字符

Question

我是一名有用的助手，可以为您翻译文本。

我有一个文本区域，用户在输入时可以添加文本和表情符号。为了使表情符号正常工作，我使用图片让用户可以点击或使用设备键盘上默认的表情符号。目前，我可以在框中输入文本或使用表情符号，但不能同时进行。

为了获取字符的Unicode，我必须像这样将Unicode字符串添加到文本区域中：

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

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

有没有办法将文本作为 HTML 输入到文本区域中，而不是作为值输入，或者有没有办法在同一个文本区域中组合 Unicode 字符和文本。

问题的 JS Fiddle

设法解决了问题，需要改变一些东西，最重要的是将 textarea 改为 contenteditable ，这样就容易多了。

这里是一个演示，

已修复版本

不能全部归功于我，这些问题的答案有所帮助。

使用 jQuery 在文本区域中插入文本

获取 contentEditable div 中的插入符位置

如何在 contenteditable 元素（div）中设置插入符（光标）位置？

如何在 contenteditable 元素中用 html 替换所选文本？

这不是最整洁的代码，可能可以更好地完成。如果您能编辑fiddle使其更好，那就随意编辑吧，它可能会帮助其他陷入同一困境的人。

- Paul Ledger

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

- derDino

Answer 2

尽管这个问题有点老，但我想提供一个替代方案，而不需要改变原始的html。

因为主要问题是所提出的解决方案涉及将textarea更改为contenteditable-container。虽然这一方法看起来很好用，但其缺点是你需要一个占位符属性的解决方法，还有无障碍问题（因为它不是一个“合适”的输入），以及制表符问题。

通过稍微重写代码，你仍然可以使用textarea，结合val（[...]）函数和作为代理对编写的表情符号：

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

https://jsfiddle.net/ay03mh6z/

- ArieAmsterdam

Answer 3

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

您可能还想在插入符号处插入字符……我最近创建了一个用户脚本，为GitHub评论执行相同的操作（您可能需要查看代码）- GitHub Custom Emojis。它使用At.js添加自动完成下拉菜单，可以帮助您完成在插入符号处插入文本的操作。

---

更新：使用可编辑的div是更好的选择，因为它允许您插入图片（demo）。问题在于该代码正在使用.html()来添加内容。相反，需要使用类似rangy的东西来在插入点插入HTML或替换用户选定的文本。一旦插入图像并添加更多文本（text <img> text），您将在我在此更新中链接的演示中看到问题。

- Mottie

---

我尝试使用Unicode \u0000交换行，但是在那一行上出现了非法TOKEN错误。如果我将Unicode（\u0000）加倍，则会插入为文本而不是字符。 - Paul Ledger

同样的问题，我可以有文本或 Unicode，但我无法将它们合并。 - Paul Ledger

添加了一个基本版本的问题链接。问题已经存在，只是没有样式。 - Paul Ledger

没有样式是因为：1）它是一个Unicode字符，2）如果操作系统没有自动替换它，你需要像Emoji One Chrome扩展程序这样的工具来替换它，最后，3）它是一个文本区域，你不能用图像替换Unicode字符，因为文本区域将显示HTML而不是图像。 - Mottie

我遇到了CSS，页面比以前更有样式了。 - Paul Ledger

修复了，但是 JSFiddle 是一个很棒的工具，用于处理 JavaScript 函数。谢谢！ - Paul Ledger