<分区>
我想创建一个输入框，人们可以在其中输入他们的技能。当它显示在网站的前端时，每个技能都会成为它自己的元素。所以我希望用户像这样输入他们的技能:
skill 1, skill 2, skill 3
在网站的前端，应该是这样的:
[技能 1] [技能 2] [技能 3]。
所以逗号将每个技能分开
然后每个技能都会在CSS中应用一些样式。
我已经尝试了几种不同的技术，但似乎都没有达到我想要的效果，如果有人可以帮助我，我将不胜感激。
谢谢
javascript - 创建标签的输入字段
标签 javascript jquery html css
最佳答案
不是没有 JavaScript(将标签添加到您的问题中)
此示例将允许您连续写入您的技能，同时按、 或Enter 来“划分”它们。
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>关于javascript - 创建标签的输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18635817/