[ACCEPTED]-Span inside text input field?-textinput

Accepted answer
Score: 11

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

You have 15 a few options. You could use javascript 14 to emulate behaviour like the email To: field. E.g. listen 13 to key presses and handle actions like backspace 12 after a ;.

Another option would be to make 11 a list appear (css styled) like a textbox. Have 10 the last <li /> contain a textbox 9 with cleared styles. Every time the user 8 adds a new email then insert a new <li 7 /> before the textbox.



<ul class="email-textbox">
    <li><input type="text" /></li>


.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 6 (jQuery, can change to vanilla)

$(function () {

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

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

Any option will require 2 some javascript however.

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

Score: 2

One way to do it would be to layer a text 7 input on top of a div that is styled to 6 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" />

You can strip all 5 styling off of receiver-input, and add borders, background 4 colors, and such to fake-input so that it 3 appears to be a text field. When a receiver 2 is added, you can create a new input-item 1 span and append it to the list.

Score: 0

Input text fields are typically used to 9 accept raw text input. Attempting to wrap 8 input text inside of a text field opens 7 you to user error and potential difficulties 6 with parsing data if the person is able 5 to manipulate the tags.

Personally I would 4 suggest keeping your current method but 3 enabling some form of AJAX support to make 2 things more dynamic and less error-prone 1 to the user.

(My $0.02)

Score: 0

TextExtjs is probably what you want. It's a jquery 5 plugin for allowing removable tags with 4 autocompletion etc in a textarea.

And here is 3 a related SO discussion - where I found 2 this plugin - on mimicking the similar behavior 1 found in some inputs on facebook.

More Related questions