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

Add text and html unicode characters to a textarea element

本文关键字：textarea 元素 添加 字符 文本 html unicode      更新时间：2023-09-26

我有一个文本区域，当用户键入时，我用它来添加文本和表情符号。为了让表情符号发挥作用，我有一些图像，用户可以点击或使用用户设备键盘上的默认值。目前我可以在方框里打字或使用emjois，但我不能两者都做。

要获得字符的unicode，我必须将unicode字符串添加到文本区域，如：

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

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

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

问题的JS Fiddle

设法解决了这个问题，有很多事情需要更改，最重要的是将textarea更改为这让事情变得容易多了

这是一把小提琴，

固定版本

这些问题的答案帮助了

使用jQuery 将文本插入文本区域

获取内容中的插入符号位置可编辑div

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

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

这不是最整洁的编码，可能可以做得更好，如果可以的话，可以随意编辑小提琴，让它变得更好，这可能会帮助其他被困在同一个地方的人

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

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

最主要的问题是，所提出的解决方案涉及将文本区域更改为可编辑内容的容器。虽然乍一看效果很好，但这种方法的缺点是，您需要一个解决占位符属性、可访问性问题（因为这不是一个"正确"的输入）和选项卡问题的方法。

只要稍微重写一下，你仍然可以使用文本区域，结合val（[…]）函数和作为代理对编写的表情符号：

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

https://jsfiddle.net/ay03mh6z/

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

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

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

相关文章：