Live Demo

Form Content

This is the data that will be submitted with HTML form.



	

	

Source

This is the original input HTML.

<textarea id="textarea" class="example" rows="1"></textarea>

This is the JavaScript source that was used to initialize this demo instance of TextExt.

<style>
    .text-core .text-tag .text-button {
        padding-left : 22px !important;
    }

    .text-core .text-tag .custom-edit {
        display    : block;
        width      : 16px;
        height     : 16px;
        background : url(/images/tag_blue.png);
        position   : absolute;
        left       : 2px;
        top        : 0px;
    }

    .text-core .text-tag .custom-edit:hover {
        background : url(/images/tag_blue_edit.png);
    }
</style>

<script type="text/javascript">
    $('#textarea')
        .textext({
            plugins: 'tags',
            items: [ 'PHP', 'Closure', 'Java' ],

            html: {
                tag: '<div class="text-tag"><div class="text-button"><span class="text-label"/><a class="custom-edit"/><a class="text-remove"/></div></div>'
            }
        })
        .click(function(e, source)
        {
            var tag = $(source).parents('.text-tag').data('text-tag');

            if(tag)
                alert('Clicked on: ' + tag);
        })
        ;
</script>
Fork me on GitHub