0

In my page i have a text input field and I want that when user writes code of a smileys (like :D) inside that field, input field changes that code to picture.

How can i do it?

Elham Gdz
  • 1,015
  • 3
  • 15
  • 31
  • This question might be useful to you http://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form – charliefortune Jan 14 '14 at 11:36
  • @charliefortune: no, i want when i write code of smileys inside that field, input field changes that code to picture. – Elham Gdz Jan 14 '14 at 11:44
  • I know, but the css background-image property might be the way to go with this. Also, in your question, you should let us know what you have already tried. – charliefortune Jan 14 '14 at 15:06

2 Answers2

0

I have came across this query earlier too. There is a chain going about the same query.

It doesnot look as easy as you are trying to potray. Writing and converting does not make sense at all.

APPROACH: You have to read each and every text entered by user if it matches the pattern of the smile and if the smiley matches then fetch the respective .gif from the images folder.

Please refer following link for a quick start.

Replace a list of emoticons with their images

Community
  • 1
  • 1
Vinayak Pingale
  • 1,315
  • 8
  • 19
0

This answer may be quite late, but this question still ranks high on Google...

The easiest way to add this feature ist to Use the SCEditor plugin (MIT licence). This is a JavaScript-and-CSS solution that pimps any textarea into a WYSIWYG editor. If the toolbar is disabled (see http://www.sceditor.com/documentation/options/), you result in a text input that automatically replaces emoticons with corresponding images.

Hint: It may be necessary to tell the script where to find the emoticons, using the emoticonsRoot option (took me 10 minutes to find that out - 10 of 30 minutes required from finding the SCEditor to making it work...).

BurninLeo
  • 4,240
  • 4
  • 39
  • 56