在HTML文本框中放置HTML的小部件(标签、Google+ Invite等)是如何工作的?

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，这取决于你。我还检查了输入值，所以它应该是空的，以删除最后插入的标签。现在，通过包装它，您有以下要检查的。这是一个很好的开始，所以你现在可以做任何你想要的标签样式和许多其他花哨的东西。

希望我能帮到你。免责声明:前面的代码不是复制粘贴的，它只是为了澄清一点。

此外，将outline:0添加到输入将使其更真实，参见Fiddle

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

Answer 2

这些都是通过javascript完成的(大部分)。了解jquery。所有繁重的工作都完成了，并为客户端脚本提供了一个"易于使用"的javascript库，可以使所有这些事情成为可能。显然，越复杂，需要的自定义脚本就越多。

Answer 3

如果我理解正确，您希望在一个看起来像本机组件的可编辑组件(文本区域)中显示文本和任何其他内容(图像)。我认为使用CSS可以很容易地实现这一点。整个技巧是清除textarea的默认样式，并用自定义CSS将<div>包裹起来。

请看这里的例子

您可以使用Javascript和CSS进一步增强解决方案。例如，可以使textarea在输入

时自动展开。

希望有帮助!