輸入字段創建標籤

Question

我想創建一個人可以輸入自己的技能爲輸入字段。當它顯示在網站的前端時，每個技能都是它自己的元素。所以我想用戶鍵入他們的技能是這樣的：

技能1，技能2，技能3

，並在該網站的前端，它應該顯示是這樣的：

[技能1] [技能2] [技能3]。

所以逗號分隔每個技能
然後每個技能都會在CSS應用到它的一些造型。

我已經嘗試了一些不同的技術，但似乎不工作，我怎麼想他們，如果有人可以幫助我在這裏，我會很感激。

感謝

Answer 1

你想試試這個http://xoxco.com/projects/code/tagsinput/？

這是標記編輯器的jQuery插件，simmilar到StackOverflow的標籤。我認爲，這很不錯。但就你的問題而言，你需要一些定製。

Answer 2

如果您使用的是客戶端腳本， 使用jquery函數split（）將包含逗號（'，'）的值添加到數組中，然後將css類附加到每個數組變量並顯示它。

var raw_data = "skill 1, skill 2, skill 3"; 
data_array = raw_data .split(","); 

可以通過data_array[0]，data_array[1]和data_array[2]

添加訪問的元素或.css("color", "red")

Answer 3

不無JavaScript的追加這些值的輸入域或HTML元素（添加標記您的問題）
這個例子可以讓你不斷地寫你技能，同時擊中，或輸入來「分」它們。

LIVE DEMO

<div id="tags"> 
    <input type="text" value="" placeholder="Add a skill" /> 
</div> 

基本CSS：

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

JS：

$(function(){ 

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

    $('#tags').on('click','.tag',function(){ 
    if(confirm("Really delete this tag?")) $(this).remove(); 
    }); 

});