Span all’interno del campo di testo di input?

È in qualche modo possibile posizionare un arco come il valore di un campo di testo di input?

Sto facendo un sistema di mailing per un sito web e vuoi una bella ricevitori ingresso in campo, in cui ha aggiunto ricevitori sono contenuti e aggiunto al valore del campo di testo di input. Al momento io uso un separato “aggiunta del campo”, mentre mostra aggiunto ricevitori in un arco-contenitore. Voglio unire questi campi insieme. Come in qualsiasi campo di immissione nel normale software di e-mail.

Aiuto sarebbe molto apprezzato! Grazie in anticipo!

Si potrebbe usare la virgola delimitato, invece? O per mantenere la vostra fantasia formattazione, utilizzare textarea?

OriginaleL’autore Snorreri | 2011-06-27

4 Replies
  1. 9

    Risposta breve: no, non è possibile includere un <span> interno di un <input />.

    Avete un paio di opzioni. Si potrebbe utilizzare javascript per emulare il comportamento come l’e-mail A: campo. E. g. ascoltare i tasti premuti e gestire azioni come backspace dopo un ;.

    Un’altra opzione sarebbe quella di fare un elenco (css styled) come una casella di testo. L’ultima <li /> contiene una casella di testo con azzerato gli stili. Ogni volta che un utente aggiunge una nuova e-mail e inserire un nuovo <li /> prima casella di testo.

    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, può cambiare di vaniglia)

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

    Sarà necessario estendere questo javascript per includere la pressione di un tasto gestore ecc, ma dà l’idea generale.

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

    Qualsiasi opzione richiede un po ‘ di javascript.

    Se è possibile utilizzare jQuery, si potrebbe verificare il jQuery UI autocomplete

    OriginaleL’autore jacob.toye

  2. 2

    Un modo per farlo sarebbe quello strato di input di testo, sulla cima di un div che è in stile a guardare come un input di testo.

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

    Si può togliere tutto fuori styling di ricevitore di ingresso, e aggiungere bordi, colori di sfondo, e simili al falso-in ingresso, in modo che sembra essere un campo di testo. Quando un ricevitore, è aggiunto, è possibile creare un nuovo input-voce span e aggiungerla all’elenco.

    OriginaleL’autore Jordan

  3. 0

    Campi di testo di Input sono in genere utilizzati per accettare crudo di testo di input. Il tentativo di avvolgere di testo di input all’interno di un campo di testo apre alla possibilità di un errore dell’utente e potenziali difficoltà con l’analisi dei dati, se la persona è in grado di manipolare i tag.

    Personalmente mi sento di suggerire di mantenere l’attuale metodo, ma offrire una qualche forma di supporto AJAX per rendere le cose più dinamico e meno soggetto a errori dell’utente.

    (Mio $0.02)

    OriginaleL’autore Grambot

  4. 0

    TextExtjs è probabilmente ciò che si desidera. È un plugin per jquery per consentire rimovibile tag con il completamento automatico ecc in una textarea.

    E qui è un MODO di discussione dove ho trovato questo plugin – a imitare il comportamento simile trovato in alcuni input su facebook.

    OriginaleL’autore worldsayshi

Lascia un commento