jQuery를 사용하는 시스템 태그 상자

Question

코드 jquery에이 효과를 추가하십시오.

태그을 쉼표로 분리하여 자동으로 추가하십시오.

Enter를 누르지 않고 입력하십시오.

태그를 삭제하는 경고를 비활성화하거나 삭제하는 방법. 시스템의

코드 :

$(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(); 
 
    }); 
 

 
});

#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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="tags"> 
 
    <span>php</span> 
 
    <span>c++</span> 
 
    <span>jquery</span> 
 
    <input type="text" value="" placeholder="Add a tag" /> 
 
</div>

가능하면 데이터베이스에 기록에 따르면 태그을 선택하기 위해 데이터베이스에 의존로의 예를 제공합니다. 경우

Answer 1

$(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() { 
 
    $(this).remove(); 
 
    }); 
 

 
});

#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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="tags"> 
 
    <span>php</span> 
 
    <span>c++</span> 
 
    <span>jquery</span> 
 
    <input type="text" value="" placeholder="Add a tag" /> 
 
</div>