javascript - css - 使 stackexchange 像标签一样

Question

我一直在尝试创建一个文本框，里面有跨度，类似于这里的那些，但我被卡住了 - 我不知道该怎么做。代码本身不起作用。我的代码:

$(".writetags").each(function(){
        var elem = $(this);
        elem.bind("keyup", function() {
            elem.data("oldVal", $(this).data("newVal") || "");
            elem.data("newVal", $(this).val());
            var oldVal = elem.data("oldVal");
            var newVal = $(this).val();
            var newChar = newVal.charAt(newVal.length-1);
            var oldChar = oldVal.charAt(oldVal.length-1);
            if(newChar!=oldChar){
                if(newChar==","){
                    var at = 0;
                    if(newVal.lastIndexOf("</span>")>=0){
                        at = newVal.lastIndexOf("</span>");
                    }
                    var toSpan = newVal.substring(at, newVal.length-1);
                    var newTxt = newVal.substring(0, at)+"<span class=\"id\">"+toSpan+"</span>";
                    elem.val(newTxt);
                }   
            }
        }); 
    });

HTML:

<input type="text" class="writetags" id="tags" style="width: 95%;direction:rtl;font-size: 18px;"/>

$(".writetags").each(function() {
  var elem = $(this);
  elem.bind("keyup", function() {
    elem.data("oldVal", $(this).data("newVal") || "");
    elem.data("newVal", $(this).val());
    var oldVal = elem.data("oldVal");
    var newVal = $(this).val();
    var newChar = newVal.charAt(newVal.length - 1);
    var oldChar = oldVal.charAt(oldVal.length - 1);
    if (newChar != oldChar) {
      if (newChar == ",") {
        var at = 0;
        if (newVal.lastIndexOf("</span>") >= 0) {
          at = newVal.lastIndexOf("</span>");
        }
        var toSpan = newVal.substring(at, newVal.length - 1);
        var newTxt = newVal.substring(0, at) + "<span class=\"id\">" + toSpan + "</span>";
        elem.val(newTxt); //change to HTML
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="writetags" id="tags" style="width: 95%;font-size: 18px;" placeholder="Seperate tags using commas." />

正如您在上面的代码片段中看到的那样，这不能正常工作。如果您键入 tag1, tag2,，它不仅不显示跨度而不是制作它 <span...>tag1</span><span...>tag2</span>它写道 <span class="id">tag1<span class="id"></span>tag2</span>

我有一个想法让它与带有 span 的 div 一起工作，并通过新 span 的长度缩短输入，但我不知道如何做到这一点，我宁愿保持简单。

提前致谢，NonameSL

Answer 1

您不能将任何内容附加到 input元素，因为它是一个自闭合元素。 <img>也是或 <br>元素。这意味着他们只使用一个标签，待创建，并且他们不能有 child 。解决方案是创建一个输入并将标签放置在它上面。