Make my textbox understand html img tag

Question

When inserting a new emoji inside my textbox i want to be displayed as the emoji image and not the emoji symbol how can i do that like instead of ( \':)\'--> pu

Answer 1

If you want to use images, then it would require you to change your HTML significantly. You would need to make use of the Content Editable functionality on something like a , rather than a regular input box. You'd then need JavaScript code to monitor keypress events and whenever it sees a :) (or whatever), it replaces the code with the appropriate .

A quick-and-dirty solution that sticks with your text box, however, would be to use the same approach, but use the Unicode emoji characters (rather than images). This will only work on platforms with the appropriate font glyphs -- although the common smilies are more widely supported -- but it gives you the idea:

HTML:

JavaScript (using jQuery, to make everyone's life easier):

$(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);
  });
});

Here's a working demo on jsFiddle. Note that the caret position will be reset every time the keyup event is triggered. I'm sure you can work around that somehow, but this code suffices to illustrate the process.