Html 跨越文本输入字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6499163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Span inside text input field?
提问by Snorreri
Is it somehow possible to place a span as the value of a text input field?
是否可以将跨度作为文本输入字段的值？
I am making a mailing system for a website and want a nice looking receivers input field, where added receivers are contained and added to the value of input text field. At the moment i use a separate "adding field" while showing added receivers in a span-container. I want to merge these to fields together. Just like any input field in regular e-mail software.
我正在为网站制作一个邮件系统，并想要一个漂亮的接收器输入字段，其中包含添加的接收器并添加到输入文本字段的值中。目前，我使用单独的“添加字段”，同时在跨度容器中显示添加的接收器。我想将这些合并到字段中。就像常规电子邮件软件中的任何输入字段一样。
Help would be most appreciated! Thanks in advance!
帮助将不胜感激！提前致谢！
回答by jacob.toye
Short answer: no, you cannot include a <span /> within an <input />.
简短回答：不，您不能在 <input /> 中包含 <span />。
You have a few options. You could use javascript to emulate behaviour like the email To: field. E.g. listen to key presses and handle actions like backspace after a ;.
你有几个选择。您可以使用 javascript 来模拟电子邮件 To: 字段等行为。例如，听按键并处理 ; 后退格等操作。
Another option would be to make a list appear (css styled) like a textbox. Have the last <li /> contain a textbox with cleared styles. Every time the user adds a new email then insert a new <li /> before the textbox.
另一种选择是使列表像文本框一样显示（css 样式）。让最后一个 <li /> 包含一个带有清除样式的文本框。每次用户添加新电子邮件时，然后在文本框之前插入一个新的 <li />。
E.G.
例如
html:
html：
<ul class="email-textbox">
<li>[email protected];</li>
<li>[email protected];</li>
<li><input type="text" /></li>
</ul>
css:
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, can change to vanilla)
javascript（jQuery，可以更改为vanilla）
$(function () {
$('.email-textbox').find('input').focus();
});
You will need to extend this javascript to include a keypress handler etc, but it gives the general idea.
您将需要扩展此 javascript 以包含按键处理程序等，但它提供了总体思路。
Demo: http://jsfiddle.net/UeTDw/1/
演示：http: //jsfiddle.net/UeTDw/1/
Any option will require some javascript however.
但是，任何选项都需要一些 javascript。
If you can use jQuery, you could check out jQuery UI autocomplete
如果你可以使用 jQuery，你可以查看jQuery UI 自动完成
回答by Jordan
One way to do it would be to layer a text input on top of a div that is styled to look like a text input.
一种方法是将文本输入分层放置在样式看起来像文本输入的 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>
You can strip all styling off of receiver-input, and add borders, background colors, and such to fake-input so that it appears to be a text field. When a receiver is added, you can create a new input-item span and append it to the list.
您可以去除接收器输入的所有样式，并为假输入添加边框、背景颜色等，使其看起来像一个文本字段。添加接收器后，您可以创建一个新的输入项跨度并将其附加到列表中。
回答by Grambot
Input text fields are typically used to accept raw text input. Attempting to wrap input text inside of a text field opens you to user error and potential difficulties with parsing data if the person is able to manipulate the tags.
输入文本字段通常用于接受原始文本输入。尝试将输入文本包装在文本字段内会导致用户错误和解析数据的潜在困难，如果此人能够操作标签。
Personally I would suggest keeping your current method but enabling some form of AJAX support to make things more dynamic and less error-prone to the user.
就我个人而言，我建议保留您当前的方法，但启用某种形式的 AJAX 支持，以使用户更加动态且不易出错。
(My $0.02)
（我的 0.02 美元）
回答by worldsayshi
TextExtjsis probably what you want. It's a jquery plugin for allowing removable tags with autocompletion etc in a textarea.
TextExtjs可能就是你想要的。它是一个 jquery 插件，用于在 textarea 中允许具有自动完成等功能的可移动标签。
And hereis a related SO discussion - where I found this plugin - on mimicking the similar behavior found in some inputs on facebook.
而这里是一个相关的SO讨论-在那里，我发现这个插件-上模仿Facebook上一些输入发现了类似的行为。
