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

Question

在我的文本框中插入一个新的表情符号时，我想显示为表情符号图像而不是表情符号符号我怎么能这样做而不是（':)'-> 将图像表示在我的文本框中）

Answer 1

一种方法：代替文本框，使用<div contenteditable="true"></div>. 当用户键入时，更改图像笑脸的出现次数。提交表单时，您的 javascript 需要将该 div 的内容转换回纯文本并将其放入字段中以供提交。

Answer 2

如果您想使用图像，则需要您显着更改 HTML。您需要在诸如 a 之类的东西上使用Content Editable<span>功能，而不是常规输入框。然后，您需要 JavaScript 代码来监视按键事件，并且每当它看到 a :)（或其他）时，它都会将代码替换为适当的<img>.

但是，与您的文本框保持一致的快速而肮脏的解决方案是使用相同的方法，但使用Unicode 表情符号字符（而不是图像）。这仅适用于具有适当字体字形的平台——尽管常见的表情符号得到更广泛的支持——但它给了你这个想法：

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的工作演示。请注意，每次keyup触发事件时都会重置插入符号的位置。我相信你可以以某种方式解决这个问题，但是这段代码足以说明这个过程。