Question

在我的文本框中插入一个新的表情符号时，我希望显示为表情符号图像，而不是表情符号符号，我怎么能这样做而不是（':)' - ＆gt;把图像表示在我的文本框内文本框）

Answer 1

单向：使用<div contenteditable="true"></div>代替文本框。当用户键入时，更改图像的笑脸的出现。提交表单时，您的javascript需要将该div的内容翻译回纯文本并将其放入字段中进行提交。

Answer 2

如果您想使用图片，则需要您显着更改HTML。您需要在<span>之类的内容上使用Content Editable功能，而不是常规输入框。然后，您需要使用JavaScript代码来监控按键事件，并且只要它看到:)（或其他），它就会用适当的<img>替换代码。

然而，一个粘贴文本框的快速解决方案是使用相同的方法，但使用Unicode emoji characters（而不是图像）。这只适用于具有适当字体字形的平台 - 虽然常见的表情符号得到更广泛的支持 - 但它可以为您提供这样的想法：

HTML：

<input class="emojify" type="text" />

JavaScript（使用jQuery，让每个人的生活更轻松）：

$(document).ready(function() {
  // Map plaintext smilies to Unicode equivalents
  var emoji = {
                ':)': '\u263a',
                ':(': '\u2639'
              },

      // Function to escape regular expressions
      reEscape = function(s) {
                   return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                 };

  $('input.emojify').keyup(function() {
    var text = $(this).val();

    // See if any of our emoji exist in the text and replace with Unicode
    $.each(emoji, function(plaintext, unicode) {
       text = text.replace(new RegExp(reEscape(plaintext), 'g'), unicode);
    });

    // Replace text with new values
    $(this).val(text);
  });
});

这是jsFiddle上的working demo。请注意，每次触发keyup事件时，都会重置插入符号位置。我确信你可以以某种方式解决这个问题，但这段代码足以说明这个过程。

让我的文本框理解html img标签

2 个答案: