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

问题描述

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

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

解决方案

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

您有几个选项。您可以使用javascript来模拟行为，如电子邮件至：字段。例如。聆听按键，并处理一个后退的动作;。

另一个选项是使列表（css样式）像一个文本框。拥有最后一个< li />包含一个带有清除样式的文本框。每次用户添加新的电子邮件，然后插入一个新的< li />在文本框之前。

EG

html：

 < ul class =email-textbox> 
< li> [e-mail];< / li> 
< li> [e-mail];< / li> 
< li>< input type =text/>< / li> 
< / ul> 
  

css：

 code> .email-textbox {
 background-color：#fff; 
 border：1px solid #ccc; 
 padding：2px 4px; 
} 
 
 .email-textbox li {
显示：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自动填充

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!

解决方案

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>[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, 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

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