Visual Tag Editor is a lightweight Javascript library that will turn any text input field into a tag editor. You can download the code + demo file and use in your projects, commercial or otherwise.

Live Demo
You can try it yourself below. Simply type tags and enter a comma "," to register them. Try the backspace key to delete tags or click them directly to remove them.

Cool eh?

Installation Notes

Run the sample HTML file in the download, then view the source to see how it works. The VisualTagEditor library registers all tag editors with the "VisualTagEditor" CSS class applied, and configures them to run as Tag Editors. A small amount of HTML is required per tag editor - a containing DIV, a hidden INPUT field (which will store your values) and a text field for entry.

The hidden INPUT field stores a list of tags as a comma delimited list, and any edits in the control update this in real time, so if your Form gets posted at any point, the hidden fields will contain the tag list.

The download package includes two zip files - style.css which you can ignore (just contains site styles) and visualtageditor.css which you must include. You should of course make adjustments to this based on your brand / requirements, however positioning and layout styles should be preserved to keep the script working as expeceted.

Visual Tag Editor uses the jQuery library, which is included in the zip file.