Question

我正在制作一个类似于StackOverflow的标签框。我看到这个问题已经在这里被问到了（How to make a "tags box" using jQuery (with text input field + tags separated by comma)），但是我对Javascript有疑问。

HTML：

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

 <div class='tag-container' id = "tag-container">
      <span class='dashfolio-tag'>Tag1</span>
      <span class='dashfolio-tag'>Tag2</span>
      <span class='dashfolio-tag'>Tag3</span>
  </div>      


 <input type="text" value="" placeholder="Add a tag" id = "add-tag-input" />

CSS：

.tag-container {
max-width: 300px; /* helps wrap the tags in a specific width */

}

.dashfolio-tag {
  cursor:pointer;
  background-color: blue;
  padding: 5px 10px 5px 10px;
  display: inline-block;
  margin-top: 3px; /*incase tags go in next line, will space */
  color:#fff;
  background:#789;
  padding-right: 20px; /* adds space inside the tags for the 'x' button */
}

.dashfolio-tag:hover{
  opacity:0.7;
}

.dashfolio-tag:after { 

 position:absolute;
 content:"×";
 padding:2px 2px;
 margin-left:2px;
 font-size:11px;
}

#add-tag-input {
  background:#eee;
  border:0;
  margin:6px 6px 6px 0px ; /* t r b l */
  padding:5px;
  width:auto;
}

JS：

$(document).ready(function(){
$(function(){ 

  $("#add-tag-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(); 
    }
  });
  $('.tag-container').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
  });

});

});

我的问题非常简单，如何将新输入添加为dashfolio-tag内的#tag-container类的范围？我试图将insertBefore属性试图将其添加到正确的节点，但无济于事。先谢谢你们！

Answer 1

更改此行代码，

if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});

到

if(txt) {
    $("<span/>", {
        text:txt.toLowerCase(),
        appendTo:"#tag-container",
        class:"dashfolio-tag"
    });
}

请参阅演示：https://jsfiddle.net/2gvdsvos/4/

修复标签之间的边距，

将HTML更新为，

<div>
  <div class="tag-container" id="tag-container">
    <span class='dashfolio-tag'>tag1</span>
    <span class='dashfolio-tag'>tag2</span>
    <span class='dashfolio-tag'>tag3</span>
  </div>
</div>
<div>
  <input type="text" value="" placeholder="Add a tag" id="add-tag-input" />
</div>

并将其添加到CSS，

.tag-container:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.dashfolio-tag {
  ...
  margin-right: 4px;
  float: left;
}

希望这有帮助！ ;）

https://jsfiddle.net/2gvdsvos/5/

创建标签框

1 个答案: