Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
  
  
  <div id="tags">
    <span>php</span>
    <span>c++</span>
    <span>jquery</span>
    <input type="text" value="" placeholder="Add a tag" />
  </div>
  
  
  
</body>
</html>
​
 
#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:left;
  color:#fff;
  background:#789;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#tags > input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}
 
$(function(){ // DOM ready
​
  // ::: TAGS BOX
  
  $("#tags input").on({
    focusout : function() {
      var txt= this.value.replace(/[^a-z0-9\+\-\.#]/ig,''); // allowed characters
      if(txt) $("<span/>",{text:txt.toLowerCase(), insertBefore:this});
      this.value="";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('#tags').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
  });
​
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers