Span im text-input-Feld?

Ist es irgendwie möglich, eine Spanne, die als Wert einen text-input-Feld?

Mache ich ein mailing-system für eine website und möchten eine gut aussehende Receiver input-Feld, wo die zusätzlichen Empfänger enthalten sind und Hinzugefügt werden, um den Wert des input-text-Feld. Im moment verwende ich eine separate "hinzufügen Feld" und zeigt gleichzeitig Hinzugefügt Empfänger in einen span-container. Ich will verschmelzen diese Felder zusammen. Nur wie in jedem Eingabefeld in regelmäßigen e-mail-software.

Hilfe wäre sehr geschätzt werden! Vielen Dank im Voraus!

Konnte verwenden Sie ein Komma getrennt statt? Oder zu halten, Ihre Phantasie zu formatieren, verwenden Sie textarea?

InformationsquelleAutor Snorreri | 2011-06-27

  1. 9

    Kurze Antwort: Nein, Sie können nicht ein <span /> in einem <input />.

    Haben Sie ein paar Optionen. Man könnte mit javascript emulieren Verhalten wie die E-Mail-An: - Feld. E. g. hören Schlüssel Pressen und Bearbeiten von Aktionen wie backspace nach einer ;.

    Andere Möglichkeit wäre eine Liste angezeigt (css styled) wie eine textbox. Habe die letzten <li /> enthalten ein Textfeld mit gelöscht Stile. Jedes mal, wenn der Benutzer fügt eine neue E-Mail legen Sie dann eine neue <li /> bevor die 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, ändern können, um Vanille)

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

    Werden Sie brauchen, um erweitern die javascript um ein keypress-handler, etc, aber es gibt die Allgemeine Idee.

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

    Jede option erfordert einige javascript jedoch.

    Wenn Sie jQuery verwenden, die Sie heraus überprüfen konnten jQuery UI autocomplete

    InformationsquelleAutor jacob.toye

  2. 2

    Einen Weg, es zu tun wäre, um der Schicht eine Texteingabe oben ein div, dass ist gestylt Aussehen wie eine Texteingabe.

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

    Können Sie die Streifen alle styling aus der Empfänger-Eingang und Rahmen hinzufügen, Hintergrundfarben, und solche fake-Eingabe, so dass es erscheint ein Textfeld. Wenn ein Empfänger Hinzugefügt wurde, können Sie erstellen Sie ein neues input-Element span und hängen Sie an die Liste.

    InformationsquelleAutor Jordan

  3. 0

    Input-text-Felder werden normalerweise verwendet, um zu akzeptieren, raw-text-Eingabe. Versuchen wickeln Sie die Eingabe von text innerhalb eines Textfeldes öffnet Sie, um Benutzer-Fehler und mögliche Schwierigkeiten mit der Analyse von Daten, wenn die person in der Lage zu manipulieren die tags.

    Persönlich würde ich vorschlagen, halten Sie Ihre aktuelle Methode aber ermöglicht irgendeine form von AJAX-Unterstützung, um Dinge zu machen, mehr Dynamik und weniger Fehler-anfällig für den Benutzer.

    (Meine $0,02)

    InformationsquelleAutor Grambot

  4. 0

    TextExtjs ist wahrscheinlich das, was Sie wollen. Es ist ein jquery-plugin, für die Erlaubnis, abnehmbar-tags mit Auto-vervollständigen etc in einer textarea.

    Und hier ist eine Verwandte SO - Diskussion gefunden, wo ich dieses Plug - in von auf er die ein ähnliches Verhalten findet man bei einigen Eingaben auf facebook.

    InformationsquelleAutor worldsayshi

Schreibe einen Kommentar