add/remove TAGS

by slawe

HTML

<div id="tags">
    <input type="text" id="input-tags" value="jeda@n,d?va" placeholder="Add a tag" />
</div>

<div id="content"></div>

CSS

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags span.tag{
  cursor:pointer;
  display:block;
  float:left;
  color:#333;
  /* background:#689; */
  border: 1px solid red;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags span.tag:hover{
  opacity:0.7;
}
#tags span.tag:after{
 position:absolute;
 content:"x";
 border:1px solid;
 padding:0 4px;
 margin:3px 0 10px 5px;
 font-size:10px;
}
#tags input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}

#content {
    display: block;
    position: relative;
    top: 100px;
    width: 300px;
    height: 100px;
    border: 1px solid red;
    margin: 10px;
}

JavaScript

$(function(){

  $('#tags input').on('focusout',function(){    
    var txt= this.value.replace(/[^a-zA-Z0-9]/g,''); // allowed characters
    if(txt) {
      $(this).before('<span class="tag">'+ txt.toLowerCase() +'</span>');
    }
    this.value="";
  }).on('keyup',function( e ){
    // if: comma,enter (delimit more keyCodes with | pipe)
    if(/(188|13)/.test(e.which)) $(this).focusout(); 

  });
  
  
  $('#tags').on('click','.tag',function(){
     $(this).remove(); 
  });

});

let previus = $('#input-tags');

var txt= previus.val().replace(/[^a-zA-Z0-9,]/g,''); // allowed characters
    if(txt) {
    	txt.toLowerCase();
    	let arr = txt.split(',');
      for(let i in arr) {
      	previus.before('<span class="tag">'+ arr[i] +'</span>');
      }
    }
    previus.val('');

$('#input-tags').on('keyup',function( e ){
var tags = document.getElementById('input-tags').value;
var content = document.getElementById('content');
tags.innerHTML = content.innerHTML;
});