输入创建标签的字段

Question

我想创建一个人们可以输入技能的输入字段。当它显示在网站的前端时，每个技能都将是它自己的元素。所以我希望用户输入他们的技能：

  技能1，技能2，技能3

并在网站的前端，它应该显示如下：

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

所以逗号将每个技能分开，然后每个技能都会在CSS中应用一些样式。

我尝试了一些不同的技巧，但似乎没有按照我的要求工作，如果有人可以帮助我，我真的很感激。

由于

Answer 1

不是没有JavaScript（将标签添加到您的问题中）
这个例子允许你连续写技能，同时点击，或输入来“划分”它们。

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

});

Answer 2

您想试试这个http://xoxco.com/projects/code/tagsinput/吗？

这是标签编辑器jquery插件，simmilar到stackoverflow标签。我想，这很不错。但就你的问题而言，你需要一些自定义。

Answer 3

如果您使用的是客户端脚本， 使用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" )

将这些值添加或附加到输入字段或html元素