Tags like stackoverlfow.

Creating tags like stackoverflow by input type="text"

by stackmanoz

HTML

<div class="inputholder">
    <input type="text" placeholder="Maximun 5 tags" id="inputtext"/>
</div>


<p>* Type in textbox to create tags<br/>* Only 5 tags are allowed<br/>
* Click on tags to delete</p>

CSS

.tag
{
    margin-right:2px;
    background:green;
    color:white;
    text-align:center;
    padding:5px;
    
    
    -webkit-transition: background .5s ease-in-out;
    transition:background .5s ease-in-out;
}

input
{
    border:2px solid #98bf26;
    display:inline-block;
    padding:5px;
}

input:focus
{
    outline-width:0;
}

.inputholder
{
    border:2px solid #98bf26;
    padding:5px;
    width:auto;
}

p
{
    color:#999999;
}

JavaScript

$(function(){    
    $("#inputtext").keypress(function(e){
        var valueofinput= $(this).val();
        if(e.which==13)
        {
            $('.inputholder').append('<span class="tag">' + valueofinput + '</span>');
            $('input').val('');
        }
    });
    $(document).on('click','.tag',function(){
        $(this).remove();
    });
    $('.inputholder').click(function() { $('#inputtext').focus(); });
});