Adding Messenger Smilies to form fields!

If you have used the Internet, e-mail or text messaging on mobile phones then there's no doubt you would have come across 'smilies/smileys' (sometimes called emoticons) at some point.

For those that don't know? Smilies are emotional icons that help purvey your feelings in text based communication systems. By adding these small icons we can give the recipient a better understanding of how we feel, and what we are trying to say when we speak to them across nonverbal mediums.

For a more in-depth look at smilies check out my tutorial base around George Petrov's ultra-cool Messenger Smilie extension for UltraDev.

If you have developed a forum that uses the Messenger Smilie extension, or simply want to allow uses to add smilies without typing them into form fields! By giving the user either a text or graphical link to click to enter smilies you can enhanced the user experience and make your site or application a lot more user-friendly :)

Many web application have a list of small smilie icons either on the page or within a pop-up window that can be clicked and the resulting smilie code is then added to the form element.

It is simply based around a javascript function that takes your input via an onClick event on the page. The following function should be placed into the head of your page:

<script language="JavaScript">
<!--

function addSmilie(smilie, smilieForm, smilieField) {
var revisedMessage;
var currentMessage = document.smilieForm.elements[smilieField].value;
revisedMessage = currentMessage+smilie;
document.smilieForm.elements[smilieField].value=revisedMessage;
document.smilieForm.elements[smilieField].focus();
return;
}

//-->
</script>

Next, you have to call the function via the linked text or graphic with your page like so:

A Graphic link
<a href="javascript:;" onClick="addSmilie(' :) ','smilieForm','forumText');"><img src="regular_smile.gif" width="19" height="19" border="0"></a>

A Text link
<a href="javascript:;" onClick="addSmilie(' :) ','smilieForm','forumText');">Happy</a>

As you can see there are 3 elements to the function:

• The smilie code to be added to the form field element (In this example it is ' :) ')
• The name of the form ('smilieForm')
• The name of the form field element ('forumText')

Hope you this is all understandable? If you wish to view the full code you can download it here.

Regards - Jason

This function could be used to insert any text into form field elements but was written specifically for the purpose of smilies :)