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>

我不得不使其與跨越DIV工作，縮短由新跨越的長度，但我輸入的想法不知道該怎麼做，我寧願保持簡單。

由於提前，NonameSL

Answer 1

如果您可以添加外部庫，那麼Selectize將對您非常有用。檢查API文檔。這很簡單，只要

// initialize the selectize control 
var $select = $('select').selectize(options); 

見JS小提琴爲例，http://jsfiddle.net/MuEh5/

Answer 2

不能附加任何東西，input元素，因爲它是一個自閉的元素。 <img>或<br>元素也是如此。這意味着他們只使用一個標籤來創建，他們不能生孩子。解決方案是創建一個輸入並將標籤放置在它上面。