跨越文本输入字段? [英] Span inside text input field?

问题描述

是否可以将跨度作为文本输入字段的值?

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!

推荐答案

简短回答:不，您不能包含 <span/>在<输入/>内.

Short answer: no, you cannot include a <span /> within an <input />.

您有几个选择.您可以使用 javascript 来模拟电子邮件收件人:字段等行为.例如.听按键并处理诸如退格之类的动作 ;.

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 ;.

另一种选择是使列表像文本框一样显示(css 样式).有最后一个 <li/>包含一个带有清除样式的文本框.每次用户添加新电子邮件时，然后插入一个新的

;在文本框之前.

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.

例如

html:

<ul class="email-textbox">
    <li>[e-mail];</li>
    <li>[e-mail];</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)

javascript (jQuery, can change to vanilla)

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

您需要扩展此 javascript 以包含按键处理程序等，但它提供了总体思路.

You will need to extend this javascript to include a keypress handler etc, but it gives the general idea.

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

任何选项都需要一些 javascript.

Any option will require some javascript however.

如果你会使用 jQuery，你可以查看 jQuery UI 自动完成

If you can use jQuery, you could check out jQuery UI autocomplete

这篇关于跨越文本输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！