css - 使像标签一样stackexchange

我一直在试图创建一个文本框，它跨越它，类似于这里的，但我卡住了 - 我不知道该怎么做。代码本身不起作用。我的代码：css - 使像标签一样stackexchange

$(".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...>tag2其写入 tag1tag2

我不得不使其与跨越DIV工作，缩短由新跨越的长度，但我输入的想法不知道该怎么做，我宁愿保持简单。

由于提前，NonameSL

来源

2016-02-19 NonameSL

那不是怎么这么实际标注工作。如果您打算检查HTML，您会发现textarea只是将_next_缩小为新添加的span标签。通过简单地检查元素并从中获取灵感，看看它如何工作。 – somethinghere

请参阅https://github.com/aehlke/tag-it，http://stackoverflow.com/tags;相关http://stackoverflow.com/questions/35401250/html-fridge-magnet-tags – guest271314

如果您可以添加外部库，那么Selectize将对您非常有用。检查API文档。这很简单，只要

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

见JS小提琴为例，http://jsfiddle.net/MuEh5/

来源

2016-02-19 14:57:36 Kishor

不能附加任何东西，input元素，因为它是一个自闭的元素。 <img>或 元素也是如此。这意味着他们只使用一个标签来创建，他们不能生孩子。解决方案是创建一个输入并将标签放置在它上面。

来源

2016-02-19 14:51:07 GMchris

好吧，但如果我这样做，我必须每次缩短文本框，我不知道该怎么做。你能帮助我吗？另外，我将如何计算跨度的长度？ – NonameSL

您只需计算一个长度 - 添加span后的空间长度_remaining_。基本上，包装宽度减去任何跨度'innerWidth'，以及您正在使用的任何间距。 – somethinghere

最简单的事情就是实际检查你想要模仿的功能。无论好坏，前端开发人员制作和共享的所有内容都变得开源。 – GMchris

css - 使像标签一样stackexchange

回答

相关问题