跨越文本输入字段？

发布于 2024-11-17 10:45:13 字数 190 浏览 3 评论 0原文

是否可以以某种方式将跨度放置为文本输入字段的值？

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

非常感谢您的帮助！提前致谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不甘平庸 2024-11-24 10:45:13

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

你有几个选择。您可以使用 JavaScript 来模拟电子邮件“收件人：”字段等行为。例如，监听按键并处理 ; 后的退格键等操作。

另一种选择是使列表看起来像文本框（CSS 样式）。最后一个

>包含一个具有清除样式的文本框。每次用户添加新电子邮件时，然后插入新的

在文本框之前。

html:

<ul class="email-textbox">
    <li>[email protected];</li>
    <li>[email protected];</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 自动完成

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

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

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.

E.G.

html:

<ul class="email-textbox">
    <li>[email protected];</li>
    <li>[email protected];</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, can change to 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.

Demo: http://jsfiddle.net/UeTDw/1/

Any option will require some javascript however.

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

回复收藏 0 原文

客…行舟 2024-11-24 10:45:13

一种方法是将文本输入分层放置在样式看起来像文本输入的 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>

您可以去掉接收器输入的所有样式，并向假输入添加边框、背景颜色等，使其看起来像一个文本字段。添加接收器后，您可以创建新的输入项范围并将其附加到列表中。

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

回复收藏 0 原文