Tagarea(jQuery plugin)

Default

Tagarea without any options passed to it whatsoever still produces a rather nice output, type in the textarea below to see it in action. Type a space to create the tag. You might also notice that you can only type alpha characters, this is a default setting of Tagarea, and can be change to whatever you like.

And the code...

				
<input id="default" type="text" />
<script type="text/javascript">
 $('#default').tagarea();
</script>
				

Changing the style

Tagarea has many options, but one of the most important is the style one. Here you can set the style directly in the script or set a className. Lets see what it looks now I have modified it to fit the style of this page...

And the code...

			
<input id="styleChanged" type="text" />
<script type="text/javascript">
 $('#styleChanged').tagarea({
  style: {
   tags: {
    css: {
     backgroundColor: '#cc0000',
     color: '#000000'
    }
   },
   closeBttn: {
    css: {
     border: '0.1em solid #333333',
     color: '#000000'
    }
   }
  }
 });
</script>	
				

Separators

By default Tagarea sets the separator as a space, but you can change this by setting the 'separator' option to any key you like, so lets try it with a comma. It is also worth pointing out that the separator will be also used to separate the tags in the value of your original field, so when working with the results from your form on the server side you will need to split by the same tag. You may notice that now you can type sentences, if this is not what you require, then you can ban the space from being typed, which I will show you next..

And the code...

				
<input id="separator" type="text" />
<script type="text/javascript">
 $('#separator').tagarea({
  separator: ','
 });
</script>
				

Banning characters

Tagarea has the option 'content.banned' which is string of chars which are banned, the user will not be able to type them, if you are like me, I would like to keep my tag system clean, with only alpha characters(no numbers, spaces, underscores, etc) which is what Tagarea sets as default. But if you did want any of the above or more, then its a simple case of overriding this value like so.. content.banned: '!$', Now only a exclamation point, and dollar sign will be banned...

And the code...

				
<input id="banChars" type="text" />
<script type="text/javascript">
 $('#banChars').tagarea({
  content: {
   banned: '!$'
  }
 });
</script>