用图像替换文本字段中的文本答案

【问题标题】：Replace Text in a textfield with Image用图像替换文本字段中的文本
【发布时间】：2018-04-27 18:42:01
【问题描述】：

我的网站上有一个表格。在这个表单里面有一些表情符号按钮。

如果用户点击其中一个按钮，他们会将表情符号添加到<textfield>，但它们看起来像这样“:)”。

那么我怎样才能用图像替换 :) 表情符号。

示例：如果用户单击按钮，则应添加 <img src="img/emoji/1.png"> 并显示它。

【问题讨论】：

您可以使用 jquery 选择器来选择 :) 并替换为 Image 元素。如果您不使用 jquery，那么可以通过普通 js 来完成。
大概你的表单是由某个编辑器库驱动的，你知道是哪一个吗？您的网站在什么平台上运行？

标签： forms image text replace emoji

【解决方案1】：

对表情符号使用 UTF8 字符。由于 UTF8 表情符号被视为文本字符，因此您无需为此使用任何 HTML，它们将在普通文本区域和文本输入中呈现，而无需任何特殊。

这里是一些 unicode UTF8 表情符号的参考。在您的按钮代码中，将 ;) 或其他任何内容替换为 UTF8 符号的代码——例如，在链接中的表格上，它显示代码 U+1F600 表示笑脸。在您的脚本中，您想用引号将其表示为\u1F600。这将呈现表情符号字符。大多数浏览器，尤其是移动浏览器，对这些字符都有很好的支持，但您可以通过使用 css 导入表情符号字体来支持这一点。

http://www.unicode.org/emoji/charts/full-emoji-list.html

附录：您甚至可以将 UTF8 表情符号直接剪切并粘贴到您的代码中。由于它们是 UTF8 中的有效字符，因此它们是有效代码..您甚至可以在变量名中使用它们?

【讨论】：

问题是我不想要 UTF8 表情符号。我想使用 Twitch 表情
@RyuZockt “表情和徽章图像是 Twitch Interactive 或其各自所有者的财产。未经他们的许可，请勿重复使用。”
只是一个建议，但您可能会寻找 Twitch 字体或类似的字体。可能有一个是开源许可的。它可能不完全相同，但您不必担心侵犯版权，并且对您的脚本的调整将是最小的。