유투부와 같은 태그입력박스 만들어 보아요
해외 어떠분의 소스를 받아서
조금 리폼해서 국내 사이트에 적용한 소스 입니다.
html 소스
<div class="input-box-tag js_tag_box">
<input type="text" value="" placeholder="태그를 작성해주세요" />
</div>
css 소스
.input-box-tag {border:#dfdfdf 1px solid; padding:5px;}
.input-box-tag span {display:block; float:left; color:#fff; background-color:#00e893; border-radius:5px; padding:5px; padding-right:25px; margin:4px;}
.input-box-tag span:hover {cursor:pointer; opacity:0.7;}
.input-box-tag span:after {position:absolute; content:"×"; margin-left:7px; color:#065236;}
.input-box-tag input {border:0; margin:0 4px; padding:7px; width:auto; outline:none;}
jquery 소스
$(function(){
$('.js_tag_box').on('click', function(){
$('.js_tag_box input').focus();
});
$('.js_tag_box input').on({
focusout : function() {
var txt = this.value.replace(/[^a-z0-9\ㄱ-ㅎ|ㅏ-ㅣ|가-힣\+\-\.\#]/ig,'');
if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
this.value = "";
},
keyup : function(ev) {
if(/(188|13)/.test(ev.which)) $(this).focusout();
}
});
$('.js_tag_box').on('click', 'span', function() {
if(confirm($(this).text() +"삭제 하시겠습니까?")) $(this).remove();
});
});