Поле ввода, которое создает теги

Question

Я бы хотел создать поле ввода, в которое люди могут ввести свои навыки. Когда он отображается на переднем конце сайта, каждый навык будет его собственным элементом. Поэтому я хотел бы пользователям вводить свои навыки, как это:

умение 1, умение 2, умение 3

и на переднем конце участка, он должен показать, как это:

[Умение 1] [Умение 2] [Умение 3].

Таким образом, запятая разделяет каждое умение
, а затем каждый навык будет иметь некоторый стиль, применяемый к нему в CSS.

Я пробовал несколько разных приемов, но не работал, как я их хочу, если кто-то может помочь мне здесь, я бы очень признателен.

Благодаря

Answer 1

вы хотели бы попробовать этот http://xoxco.com/projects/code/tagsinput/?

Это редактор тегов jquery plugim, похожий на теги 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]

добавить или добавить эти значения в поле ввода или HTML элементов с .css("color", "red")

Answer 3

Не без JavaScript (добавлены теги к вашему вопросу)
В этом примере вы сможете непрерывно писать свои навыки, пока нажимаете , или Введите, чтобы разделить их.

LIVE DEMO

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

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

});