Question

以某种方式可以将span作为文本输入字段的值放置吗？

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

非常感谢帮助！提前谢谢！

Answer 1

简短回答：不，你不能包含＆lt; span /＆gt;在＆lt; input /＆gt;内

您有几个选择。您可以使用javascript来模拟电子邮件收件人：字段等行为。例如。听取按键操作并在;。

之后处理退格等操作

另一种选择是使列表显示（css样式），就像文本框一样。有最后一个＆lt; li /＆gt;包含已清除样式的文本框。每次用户添加新电子邮件，然后插入新的＆lt; li /＆gt;在文本框之前。

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，可以改为vanilla）

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

你需要扩展这个javascript以包含一个按键处理程序等，但它提供了一般的想法。

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

任何选项都需要一些javascript。

如果您可以使用jQuery，可以查看jQuery UI autocomplete

Answer 2

这样做的一种方法是将文本输入层叠在div上，该div的样式看起来像文本输入。

<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 3

输入文本字段通常用于接受原始文本输入。尝试将输入文本包装在文本字段中会打开用户错误，并且如果此人能够操作标记，则会解析数据的潜在困难。

就我个人而言，我建议保留您当前的方法，但启用某种形式的AJAX支持，以使用户更加动态，更不容易出错。

（我的$ 0.02）

Answer 4

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

here是一个相关的SO讨论 - 在那里我找到了这个插件 - 模仿在facebook上的一些输入中发现的类似行为。

跨文本输入字段？

4 个答案: