2

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

技能1、技能2、技能3

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

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

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

我尝试了一些不同的技术，但似乎没有按照我想要的方式工作，如果有人可以在这里帮助我，我将非常感激。

谢谢

4

3 回答 3

6

不是没有 JavaScript（将标签添加到您的问题中）
这个示例将允许您不断编写您的技能，同时点击,或Enter“划分”它们。

像 stackoverflow 这样的标签生成器

jQuery(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).trigger('focusout');
  });

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

});
#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;
}
Add a skill and hit [,] or [Tab] or [Enter]<br><br>

<div id="tags">
  <span class="tag">Photoshop</span>
  <span class="tag">Illustrator</span>
  <input type="text" value="" placeholder="Add a skill" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

于 2013-09-05T13:23:45.100 回答
1

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

这是标签编辑器 jquery 插件，类似于 stackoverflow 标签。我觉得，挺好看的。但就您的问题而言，您需要进行一些自定义。

于 2013-09-05T12:07:31.153 回答
1

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

于 2013-09-05T12:10:46.857 回答