Looking for a way to display images in real-time as a user types letters into a textarea field. When a user inputs a letter like 'k', an image associated with that letter should appear. Currently, only pre-entered letters on the page show images, not text entered into the textarea field. You can check out the [demo] (http://jsfiddle.net/jLzsrygv/8/) for reference.
The method I am using to convert characters to images is outlined below:
$('#target').each(function() {
var txt = $(this).html();
var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
var html = txt.replace(/\*/g, img);
$(this).html(html);
});
What I've attempted so far
I've tried adjusting the allowed tags of the textarea field to allow img tags and controlling it with another master textarea, but this approach did not work as expected. The 'k' input does not automatically convert to the img tag in the original textarea field.
Since directly inserting img tags seems to be the only solution, my limited understanding leads me to believe that dynamically replacing typed letters in real-time might provide a viable option. I have experimented with text replacements, but I suspect that my use of textContent instead of value or innerHTML might be causing issues. Check out how far I've come with [this example] (http://jsfiddle.net/hnou29me/).
Any assistance would be greatly appreciated.