I am trying to create tags like stackoverflow for my website, a user on my website will be creating tags for filtering results or many other operations like search, expertise etc.

I am able to create tag but not able to show it inside input box as we do in stackoverflow, there is problem with margin between tags. Every time when i create tag it is aligned but has no space or margin. Currently it is showing all tags inline without any space.

jQuery i tried-

$(function () {        
    $("#inputtext").keypress(function (e) {
        var valueofinput = $(this).val();
        if (e.which == 13) {
            $('.tag').html(valueofinput);
            $('.tag').show();
        }
    });

    $('.tag').click(function () {
        $(this).hide();
    });        
});    

However i tried showing it in input tag like this-

if(e.which==13)
{
$("#inputtext").val().addClass('tag').css('display','inline-block');
}
if(e.which==32)     //for space
{
$('.tag').css('margin-left','5px');
}

But this doesn't work.

Jsfiddle

I am trying to create tags like stackoverflow for my website, a user on my website will be creating tags for filtering results or many other operations like search, expertise etc.

I am able to create tag but not able to show it inside input box as we do in stackoverflow, there is problem with margin between tags. Every time when i create tag it is aligned but has no space or margin. Currently it is showing all tags inline without any space.

jQuery i tried-

$(function () {        
    $("#inputtext").keypress(function (e) {
        var valueofinput = $(this).val();
        if (e.which == 13) {
            $('.tag').html(valueofinput);
            $('.tag').show();
        }
    });

    $('.tag').click(function () {
        $(this).hide();
    });        
});    

However i tried showing it in input tag like this-

if(e.which==13)
{
$("#inputtext").val().addClass('tag').css('display','inline-block');
}
if(e.which==32)     //for space
{
$('.tag').css('margin-left','5px');
}

But this doesn't work.

Jsfiddle

• javascript
• jquery
• css

• $("#inputtext").val() is a getter method, try using $("#inputtext").val('').addClass('tag').css('display','inline-block'); instead. – palaѕн Commented Jul 30, 2013 at 4:47
• Maybe use the Tagit plugin? – Barmar Commented Jul 30, 2013 at 4:49

3 Answers 3

Short answer: You can't/don't. But you can give the appearance that you are.

Longer answer: Example

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

You can't insert a div in an input tag. Here in stackoverflow, if you try adding a tag in the input tag, then right click on the input tag then click on Inspect Element, you will see that they are adding span tag, but not inside the input tag itself.

<div>
   <span >  //for the tags
  <input />
</div>

$(function(){
 var oldVal;         
 $("#inputtext").change(function(e){    
       oldVal= $(this).val();    
 });   

 $("#inputtext").keypress(function(e){        
    var valueofinput= $(this).val().replace(oldVal,'');
     if(e.which==13)
    {
        $('.tag').append("<span>"+valueofinput+"</span>&nbsp;");         
        $('.tag').show();
    }        
 });    
});

css

.tag
{
 height:auto;
 width:auto;
 background:white;
 color:white;
 text-align:center;
 display:none;
 position:absolute;
 padding:5px;    
 margin:1em;
}

.tag > span
{
  background:green;
}

http://jsfiddle/Hb8yj/14/