标签的输入字段，以逗号分隔 [英] Input field for Tags separated by comma

问题描述

我正在开发一个Web应用程序，该应用程序允许用户按标签发布内容，但事实是，如果标签之间用逗号和文本字段分隔，如何在标签周围添加一个漂亮的块值仍然是相同的，只是用户的视图会有所不同.

I am working on a web application that allows users to post content by tags but the thing is, how would I make a nice block around a tag if its separated by a comma and the text field value would still be the same only the view to the user would differ.

例如YouTube或StackOverflow之类的示例，目前我不需要它来检查数据库或其他任何内容.

An example would be such as YouTube or StackOverflow, for now I don't need it to check a database or anything.

谢谢！

推荐答案

类似于Stack Overflow的事情

Something similar like Stack Overflow does:

• 允许字母数字和+-.#(并修剪空格！)
• 转换为小写
• 在 focusOut Enter ，上自动创建标签框(添加更多|分隔的keyCodes)
• 点击删除标签框(带有确认)

• Allows alphanumeric and +-.# (and trims whitespaces!)
• Convert to lowercase
• Create automatically the Tag Box on focusOut Enter , (add more | delimited keyCodes)
• Delete Tag Box on click (with confirmation)

$(function(){ // DOM ready

  // ::: TAGS BOX

  $("#tags input").on({
    focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
      this.value = "";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('#tags').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
  });

});

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:left;
  color:#fff;
  background:#789;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#tags > input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tags">
  <span>php</span>
  <span>c++</span>
  <span>jquery</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

这篇关于标签的输入字段，以逗号分隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！