Saturday, October 13, 2012

In my earlier post I demonstrate how you can insert smiley images in richtextbox when a user types the corresponding emotion code.

Now let me show how you can easily do the same in with simple javascript code.
  • First of all download some smiley images and paste them in your website's root folder
  • Put a div element inside your aspx page with contentEditable property set to true and onkeyup="replacewithimg(this);"

  • In head section of your aspx page add the following javascript


  • txt & img are two Arrays which holds the emotion text and emotion image element source code respectively side by side

  • replacewithimg is a function which accept div as a parameter in which the client is typing. This function is called when user press and release a key. In this function I created a for loop which checks whether any emotion text is there in div or not, if it is there then the javascript's replace() function will replace it with corresponding img tag which is stored in img array and after replacing the text set div's innerHTML to var innHTML which contains the updated innerHTML.

[Note: regular.gif, tongue.gif and Sad.gif are the names of my smiley images, Please update them if you have different names]

Download Demo Website


Anonymous said...


Anonymous said...


Anonymous said...


Chad Nelson said...

Awesome thank you!

Ashish arora said...

it wil work on client side. cn u plz send me server side code

lee woo said...

The oldest and strongest emotion of mankind is
fear, and the oldest and strongest kind of fear is fear of the unknown. See the link below for more info.


Post a Comment