¿Span dentro del campo de entrada de texto?

Question

¿Es de alguna manera posible colocar un lapso como el valor de un campo de entrada de texto?

Estoy haciendo un sistema de correo para un sitio web y quiero un campo de entrada de receptores de aspecto agradable, donde los receptores agregados se incluyen y se agregan al valor del campo de texto de entrada. Por el momento, utilizo un "campo de adición" separado mientras muestro los receptores agregados en un contenedor de tramo. Quiero unir estos a campos juntos. Al igual que cualquier campo de entrada en el software regular de correo electrónico.

Ayuda sería muy apreciada! ¡Gracias por adelantado!

Answer 1

Respuesta corta: no, no puede incluir un < span/> dentro de una entrada </>.

Tiene algunas opciones. Puede usar javascript para emular el comportamiento, como el campo Para correo electrónico. P.ej. escuchar pulsaciones de teclas y manejar acciones como retroceso después de;

Otra opción sería hacer aparecer una lista (estilo css) como un cuadro de texto. Haga que el último < li/> contenga un cuadro de texto con estilos borrados. Cada vez que el usuario agrega un nuevo correo electrónico, inserte un nuevo < li/> antes del cuadro de texto.

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, puede cambiar a la vainilla)

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

Usted tendrá que extender esta javascript para incluir un controlador de pulsación de tecla etc., pero da la idea general.

Demostración: http://jsfiddle.net/UeTDw/1/

Cualquier opción requerirá algo de JavaScript sin embargo.

Si puede utilizar jQuery, podrías comprobar a cabo jQuery UI autocomplete

Answer 2

Los campos de texto de entrada se usan generalmente para aceptar el ingreso de texto sin procesar. Intentar envolver texto de entrada dentro de un campo de texto lo abre a un error del usuario y a posibles dificultades con el análisis de datos si la persona puede manipular las etiquetas.

Personalmente, le sugiero que mantenga su método actual, pero habilitando alguna forma de soporte AJAX para hacer las cosas más dinámicas y menos propensas a errores para el usuario.

(Mi $ 0,02)

Answer 3

Una forma de hacerlo sería a la capa una entrada de texto en la parte superior de un div con el estilo que parecerse a una entrada de texto.

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

Puede despojar de todo un estilo fuera de receptor de entrada y añadir bordes, colores de fondo, y tal que fingir-entrada de forma que parece ser un campo de texto. Cuando se agrega un receptor, puede crear un nuevo tramo de elemento de entrada y anexarlo a la lista.

Answer 4

TextExtjs es probablemente lo que quiere. Es un complemento jquery para permitir etiquetas removibles con autocompletado, etc. en un área de texto.

Y here es una discusión SO relacionada, donde encontré este complemento, sobre imitar el comportamiento similar encontrado en algunas entradas en Facebook.