[ACCEPTED]-Span inside text input field?-textinput
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.
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 6 (jQuery, can change to vanilla)
$(function () {
$('.email-textbox').find('input').focus();
});
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
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" />
</div>
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.
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)
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.