Tag Me
-
Type and press Enter for Tag ;)
body{padding:15px; margin:0; background:#FBFCFC; font-family:arial;}
h1{color:#EA5D00; text-align:center;}
p{color:#EA5D00}
/*==========================================================================*/
.tag-box{
list-style:none;
padding:3px;
margin:0;
display:inline-block;
font-family:arial;
width:100%;
border:1px solid #F39F19;
@include border-radius(4px);
*{
@include transition-property(all);
@include transition-duration(0.3s);
}
li{
padding:3px 5px;
float:left;
&.tags{
background:#F1C617;
color: #fff;
@include border-radius(4px);
margin:3px;
position:relative;
.close{
display: inline-block;
position: absolute;
color:#E7832B;
overflow: hidden;
width:0;
right: 0;
height: 18px;
cursor: pointer;
top: 3px;
}
&:hover{
padding-right:18px;
.close{
width:14px;
}
}
}
.input-tag{
height:24px;
vertical-align:middle;
border:none;
outline:none;
background:none
&:hover, &:focus{
outline:none;
border:none;
}
}
}
}
$('.input-tag').bind("keydown", function (kp) {
var tag = $('.input-tag').val();
if(tag.length > 0){
// Taging
if(kp.keyCode == 13){
$(".new-tag").before(''+tag+'x ');
$(this).val('');
}
}
else {
if(kp.keyCode == 8){ $(".new-tag").prev().remove();}
}
});
//Delete tag
$(".tag-box").on("click", ".close", function() {
$(this).parent().remove();
});
$('.tag-box').click(function () {
$('.input-tag').focus();
});