跨度在文本输入字段？

Question

是否有可能将跨度作为文本输入字段的值？

我正在为一个网站制作一个邮件系统，并希望一个漂亮的接收器输入字段，其中包含添加的接收器并添加到输入文本字段的值中。目前我使用一个单独的“添加字段”，同时在span-container中显示添加的接收器。我想将它们合并到一起。就像常规电子邮件软件中的任何输入字段一样。

帮助将不胜感激！提前致谢！

Answer 1

简答：不，您不能在<输入/ >内包含< span/>。

您有几个选项。您可以使用JavaScript来模拟电子邮件To：字段的行为。例如。聆听按键并在处理完后处理退格等操作。

另一种选择是使列表像一个文本框出现（CSS样式）。最后的< li/>是否包含清除样式的文本框。每当用户添加新电子邮件时，在文本框前插入一个新的< li/>。

E.G.

HTML：

<ul class="email-textbox"> 
    <li>bob@email.com;</li> 
    <li>jane@email.com;</li> 
    <li><input type="text" /></li> 
</ul> 

CSS：

.email-textbox { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    padding: 2px 4px; 
} 

.email-textbox li { 
    display: inline-block; 
    list-style: none; 
    margin-left: 5px; 
} 

.email-textbox input { 
    background: none; 
    border: none; 
} 

的JavaScript（jQuery的，可以改变香草）

$(function() { 
    $('.email-textbox').find('input').focus(); 
}); 

您需要扩展这个JavaScript来包括按键处理等等，但它给出了总体思路。

演示：http://jsfiddle.net/UeTDw/1/

任何选项将需要但一些JavaScript。

如果你可以使用jQuery，你可以检查出jQuery UI autocomplete

Answer 2

输入文本字段通常用于接受原始文本输入。尝试在文本字段内部包装输入文本时，如果用户能够操作标签，则会打开用户错误和解析数据的潜在困难。

就我个人而言，我会建议保持当前的方法，但启用某种形式的AJAX支持，使事情更具动态性，并且对用户的错误更少。

（我的$ 0.02）这样做将是对的样式看起来像一个文本输入一个div的顶层文本输入

Answer 3

的一种方式。

<div id="fake-input"> 
    <span class="input-item">John Doe</span> 
    <span class="input-item">Jane Deere</span> 
    <input id="receiver-input" type="text" /> 
</div> 

可以去除所有的造型关闭接收机输入的，所以它看起来是一个文本字段添加边框，背景颜色，以及这样的假输入。当添加接收者时，您可以创建一个新的输入项目范围并将其附加到列表中。

Answer 4

TextExtjs可能是你想要的东西。这是一个jquery插件，允许在textarea中使用自动完成等可移动标签。

和here是一个相关的SO讨论 - 我发现这个插件 - 模仿Facebook上的一些输入中发现的类似行为。