javascript - 将 HTML 放入 HTML 文本框(标签、Google+ 邀请等)的小部件如何工作？

Question

我发现自己很难开始这个主题，所以我可以根据自己的需要编写自己的小部件。我如何将纯文本和 HTML 元素(链接、图像)组合在一起，就像在网络上随处可见(谷歌、Facebook 等)一样，在 HTML 文本框中，它仍然像简单文本一样表现在一起(即可以用退格键删除)?

这是如何运作的？什么是潜在的“技巧”？

Answer 1

好的，你的问题表明你需要一个起点， 然后让我们从基本的 HTML 开始，例如 div、ul 和 input

<div class="myTags">
    <ul id="tags">
        <li class="nd"><input type="text" id="tagInput" placeholder="add some tags..."/></li>
    </ul>
</div>

现在让我们编写一些 jquery 来处理标记:

$('#tagInput').keypress(function(e){
 if (e.keyCode === 13) {
     tag = $(this).val();
     if(tag.length > 0){
        var newLi = $('<li></li>').text(tag);
     }
     $('#tags').append(newLi);
     $(this).val('');
     }
});

这个 jquery 代码片段监听提供的输入上的按键事件，我称之为 tagInput 输入键与 keyCode 13 一起使用，因此，如果它被击中，您将获取文本框的值并创建一个新的 li 元素，然后您将其附加到您的 ul。

这里缺少的是如何使 ul 看起来像水平的，这是要使用的起始 css:

#tags{
    float: left;
    min-height: 10px;
    min-width: 100px;
    margin:0px;
    padding: 0px;
    list-style-type: none;    
    text-align: center;
    background-color: #fff;
    border: 1px solid #ccc;
}
#tags li { display: inline-block; padding: 10px;}
#tagInput{background: none;
    border: none;}

这将使 ul 水平，它将从输入中删除背景并向 ul 添加边框和背景，这是一个可爱的技巧，特别是在占位符可用的情况下，现在对于退格删除过程也很简单，采用前面的 jquery 片段并向其添加以下代码:

$('#tagInput').keyup(function(e){
    if(e.keyCode === 8 && $(this).val().length<=0){
         $('#tags li:last').not('.nd').remove();
     }
});

它所做的只是检查 keyCode 8，这是一个退格键，注意有些人会建议收听 keyCode 46也就是delete，由你决定。 并且我还检查输入值，因此它应该为空以删除最后插入的标签。 现在通过包装你有以下 Fiddle去检查。 这是一个很好的起点，因此您现在可以使用标签样式和许多其他花哨的东西做任何您想做的事情。

希望对您有所帮助。 免责声明:之前的代码不能复制粘贴，它只是为了澄清一点。

更新 另外，在输入中添加 outline:0 会更真实，参见 Fiddle

#tagInput{background: none;
    border: none; outline:0}