Make my text box html img tag

Question

When inserting a new emoji inside my text box, I want it to be displayed as an emoji image, not an emoji character, how can I do this and not ( ':)' → put the image in its text box)

Answer 1

If you want to use images, you will need to significantly modify your HTML code. You will need to use Content Editable on something like <span> , and not on a regular input field. Then you need JavaScript code to track the keystroke events, and whenever it sees :) (or something else), it replaces the code with the corresponding <img> .

However, a quick and dirty solution that sticks to your text box would have to use the same approach, but use Unicode emoji characters (not images). This will only work on platforms with matching font glyphs - although generic emoticons are more widely supported, but this gives you an idea:

HTML:

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

JavaScript (using jQuery to make life easier for everyone):

 $(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 carriage position will be reset each time the keyup event keyup . I'm sure you can get around this somehow, but this code is enough to illustrate this process.

Answer 2

One of the methods. Use <div contenteditable="true"></div> instead of a text box. As the user enters, the appearance of the emoticon for the image is changed. When the form is submitted, your javascript needs to translate the contents of this div back into plain text and put it in the field to submit.