A Pen by Fabrizio Fallico.

index.html

<div class="container">

    <h1>taggingJS</h1>

    <h3>jQuery plugin to tagging like a charm!</h3>

    <div class="row">
        <div class="col-md-6">
            <div class="blockquote-box blockquote-info clearfix">
                <div class="square pull-left">
                    <span class="glyphicon glyphicon-info-sign glyphicon-lg"></span>
                </div>
                <h4>Information</h4>
                <p>
                    Supports all major browsers in the world (<code>IE 6+</code>, <code>Mozilla Firefox 1+</code>, <code>Google Chrome 1+</code>, <code>Safari 5.1+</code>).
                </p>
            </div>
            <div class="blockquote-box blockquote-warning clearfix">
                <div class="square pull-left">
                    <span class="glyphicon glyphicon-ok glyphicon-lg"></span>
                </div>
                <h4>Customizable</h4>
                <p>
                    Easily customizable for every need.
                </p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="blockquote-box clearfix">
                <div class="square pull-left">
                    <span class="glyphicon glyphicon-road glyphicon-lg"></span>
                </div>
                <h4>Simple</h4>
                <p>
                    It's a kind of magic! Just use <code>$('#input_zone').tagging();</code>
                </p>
            </div>
            <div class="blockquote-box blockquote-success clearfix">
                <div class="square pull-left">
                    <span class="glyphicon glyphicon-tree-conifer glyphicon-lg"></span>
                </div>
                <h4>Enviroment</h4>
                <p>
                    Developed with respect for the environment.
                </p>
            </div>
        </div>
    </div>

    <!-- The example Code -->
    <div class="example-wrapper">
        <div class="tags well">
            <label for="tag" class="control-label">Tag</label>
            <div data-name="tag" id="tag">preexisting-tag</div>
            <p class="help-block">Press Enter or Comma to create a new tag, Backspace or Delete to remove the last one.</p>
        </div>
    </div>

    <footer>
        &copy; 2014 <a href="https://github.com/sniperwolf">Fabrizio Fallico (Sniper Wolf)</a>. <a href="LICENSE.md">License</a>
    </footer>

script.js

// taggingJS v1.0
//    2014-03-22

// Copyright (c) 2014 Fabrizio Fallico

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

( function( $, window, document ) {

    $.fn.tagging = function(a) {

        // Here we will save all tags (for reference)
        var tags = [];

        $( this ).each( function() {

            var init_text, $type_zone, obj, add_tag,
                    $this = $( this );

            // Checking object length
            if ( ! $this.length ) {
                console.error( "%s not found", a );
                return ;
            }

            // Init Text
            init_text = $this.text();

            // Empty the original div
            $this.empty();

            // Adding class and contenteditable attribute to the type zone
            $type_zone = $( document.createElement( "div" ) )
                            .addClass( "type-zone" )
                            .attr( "contenteditable", true );

            // Adding tagging class and appending the type zone
            $this
                .addClass( "tagging" )
                .append( $type_zone );

            obj = {
                input_name: $this.data( "name" )
            };

            /**
             * Simply add tag to type_zone
             *
             * @param string    text    Tag's text
             */
            add_tag = function( text ) {

                if ( ! text ) {
                    text = $type_zone.text();
                    $type_zone.empty();
                }

                if ( ! text || ! text.length ) {
                    return ;
                }

                var $tag = $( document.createElement("div") )
                                .addClass( "tag" )
                                .html( "<span>#</span> " + text );

                // Creating and Appending hidden input
                $( "<input/>" )
                    .attr( "type", "hidden" )
                    .attr( "name", obj.input_name + "[]" )
                    .val( text )
                    .appendTo( $tag );

                // Creating and tag button (with "x" to remove tag)
                $( "<a/>" )
                    .attr( "role", "button" )
                    .addClass( "tag-i" )
                    .text( "x" )
                    .click( function() {
                        $tag.remove();
                    })
                    .appendTo( $tag );

                tags.push( $tag );

                // Adding tag in the type zone
                $type_zone.before( $tag );
            };

            // Keydown event listener on type_zone
            $type_zone.on( "keydown", function(e) {
                var $last_tag,
                    key = e.which;

                // Enter or comma
                if ( key === 13 || key === 188 ) {

                    // Prevent Default
                    e.preventDefault();

                    // Adding tag
                    add_tag();
                }

                // Backspace or Del
                if ( $type_zone.text() === "" && ( key === 8 || key === 46 ) ) {

                    // Prevent Default
                    e.preventDefault();

                    // Retrieve last tag
                    $last_tag = tags.pop();

                    // If there is a tag
                    if ( $last_tag !== undefined ) {
                        // Removing last tag
                        $last_tag.remove();
                    }

                }

            }).blur( add_tag );

            $this.on( "click", function() {
                $type_zone.focus();
            });

            // Adding text present on type_zone as tag on first call
            $.each( init_text.split("\n"), function() {
                add_tag( this );
            });
        });

        // We don"t break the chain
        return this;
    };


})( window.jQuery, window, document );

// jQuery on Ready example
( function( $, window, document ) {
    $( document ).ready( function() {
        var t = $( "#tag" ).tagging();
        t.addClass( "form-control" )
    });
})( window.jQuery, window, document );

style.css

/* Example CSS */
body{font-family: 'PT Sans', "helvetica neue", sans-serif}
.glyphicon-lg{font-size:3em}
.blockquote-box{border-right:5px solid #E6E6E6;margin-bottom:25px}
.blockquote-box .square{width:100px;min-height:50px;margin-right:22px;text-align:center!important;background-color:#E6E6E6;padding:20px 0}
.blockquote-box.blockquote-success{border-color:#4CAE4C}
.blockquote-box.blockquote-success .square{background-color:#5CB85C;color:#FFF}
.blockquote-box.blockquote-info{border-color:#46B8DA}
.blockquote-box.blockquote-info .square{background-color:#5BC0DE;color:#FFF}
.blockquote-box.blockquote-warning{border-color:#EEA236}
.blockquote-box.blockquote-warning .square{background-color:#F0AD4E;color:#FFF}

/* Tagging Basic Style */
.tagging {
	border: 1px solid #CCCCCC;
	cursor: text;
	font-size: 1em;
	height: auto;
	padding: 10px 10px 15px;
}

.tag {
	background: none repeat scroll 0 0 #EE7407;
	border-radius: 2px;
	color: white;
	cursor: default;
	display: inline-block;
	position: relative;
	white-space: nowrap;
	padding: 4px 20px 4px 0;
	margin: 5px 10px 0 0;
}

.tag span {
	background: none repeat scroll 0 0 #D66806;
	border-radius: 2px 0 0 2px;
	margin-right: 5px;
	padding: 5px 10px 5px;
}

.tag .tag-i {
	color: white;
	cursor: pointer;
	font-size: 1em;
	height: 0;
	line-height: 0.1em;
	position: absolute;
	right: 5px;
	top: 1em;
	text-align: center;
	width: 10px;
}

.tag .tag-i:hover {
	color: black;
	text-decoration: underline;
}

.type-zone {
	height: auto;
	width: auto;
	min-width: 20px;
	display: inline-block;
}

.type-zone:focus {
	outline: none;
}

taggingJS---Example.markdown

taggingJS - Example

A Pen by Fabrizio Fallico on CodePen.

License.