Creazione di una textarea falso

Question

Per un progetto su cui sto lavorando, ho bisogno di essere in grado di mostrare "div" prima che il contenuto di testo di una textarea:

un primo momento ho pensato che avrei potuto solo posizionare i div con posizionamento assoluto e z-index, ma ciò significherebbe "spingere" il testo e assicurarsi che l'utente non possa rimuovere quei primi spazi, non con backspace né ctrl + c né ctrl + x né delete .. Sembrava complicato ottenere tutto il possibile.

Ora, io sto cercando di utilizzare un "div" fatta per assomigliare ad una textarea, che contiene un modificabile "span" che conterrà il testo:

che lavora per il momento, ma non è perfetto, soprattutto in termini di: messa a fuoco (facendo clic in qualsiasi punto del div esterno si visualizza il cursore nel campo di testo *) e sembra che si interrompa se svuoto l'estensione del testo.

Qualche idea su come risolvere questo problema? Sono aperto a suggerimenti, anche se devo cambiare la struttura della mia area di testo fasulla.

Dovrebbe funzionare su tutti i principali (recenti) browser e può utilizzare jQuery.

• $('#outerDiv').bind('click', $('#outerDiv span.text').focus()); sembra funzionare in Chrome ma non in firefox.

Answer 1

Cosa farei è il seguente:

1. vostro elemento contenente (l'editor di testo) dovrebbe essere un elemento a livello di blocco. Non è modificabile
2. I tag devono essere composti da quanto segue: Un contenitore che è float s a sinistra e inline-block o float bambini.
3. A blocco non float (importante) elemento di livello contenteditable.

Risultato finale:

<div> 
    <!-- The list of tags --> 
    <ul style="float:left"> 
    <li style="float:left">...</li> 
    <li style="float:left">...</li> 
    <li style="float:left">...</li> 
    </ul> 
    <!-- This will contain your text: --> 
    <div contenteditable="true">...</div> 
</div> 

Se si dispone di un sacco di tag, faranno capo alla riga successiva. Il testo nell'elemento modificabile avvolgerà anche i tag.

Fare clic sui tag non consente di mettere a fuoco l'elemento modificabile, ma è possibile porvi rimedio con JavaScript.

Here's an example I whipped up. Funziona in Safari/Chrome/Firefox. Non ho testato Internet Explorer, ma dovrebbe funzionare correttamente.