Come faccio a rendere un DIV modificabile come un campo di testo?

Question

Ho uno DIV che ha contentEditable=true in modo che l'utente possa modificarlo. Il problema è che non sembra un campo di testo, quindi potrebbe non essere chiaro all'utente che può essere modificato.

Esiste un modo per personalizzare lo DIV in modo che appaia all'utente come un campo di immissione del testo?

Answer 1

Questi hanno lo stesso aspetto come loro controparti reali in Safari, Chrome e Firefox. Si degradano con grazia e sembrano OK anche in Opera e IE9.

Demo: http://jsfiddle.net/ThinkingStiff/AbKTQ/

CSS:

textarea { 
    height: 28px; 
    width: 400px; 
} 

#textarea { 
    -moz-appearance: textfield-multiline; 
    -webkit-appearance: textarea; 
    border: 1px solid gray; 
    font: medium -moz-fixed; 
    font: -webkit-small-control; 
    height: 28px; 
    overflow: auto; 
    padding: 2px; 
    resize: both; 
    width: 400px; 
} 

input { 
    margin-top: 5px; 
    width: 400px; 
} 

#input { 
    -moz-appearance: textfield; 
    -webkit-appearance: textfield; 
    background-color: white; 
    background-color: -moz-field; 
    border: 1px solid darkgray; 
    box-shadow: 1px 1px 1px 0 lightgray inset; 
    font: -moz-field; 
    font: -webkit-small-control; 
    margin-top: 5px; 
    padding: 2px 3px; 
    width: 398px;  
} 

HTML:

<textarea>I am a textarea</textarea> 
<div id="textarea" contenteditable>I look like textarea</div> 

<input value="I am an input" /> 
<div id="input" contenteditable>I look like an input</div> 

uscita:

Answer 2

È possibile posizionare un TEXTAREA di dimensioni simili sotto il DIV, in modo che la cornice del controllo standard sia visibile attorno a div.

Probabilmente è bene impostarlo su disabilitato, per evitare il furto accidentale del fuoco.

Answer 3

In WebKit, si può fare: -webkit-appearance: textarea;

Answer 4

Si potrebbe andare per una casella di un'ombra interna:

div[contenteditable=true] { 
    box-shadow: inset 0px 1px 4px #666; 
} 

ho aggiornato il jsfiddle da Jarish: http://jsfiddle.net/ZevvE/2/

Answer 5

Vorrei suggerire questo per abbinare lo stile di Chrome, esteso dall'esempio di Jarish. Si noti la proprietà del cursore che le risposte precedenti hanno omesso.

cursor: text; 
border: 1px solid #ccc; 
font: medium -moz-fixed; 
font: -webkit-small-control; 
height: 200px; 
overflow: auto; 
padding: 2px; 
resize: both; 
-moz-box-shadow: inset 0px 1px 2px #ccc; 
-webkit-box-shadow: inset 0px 1px 2px #ccc; 
box-shadow: inset 0px 1px 2px #ccc; 

Answer 6

Il problema di tutte queste è che non affrontano se le righe di testo sono lunghi e molto più ampia che l'overflow div: auto non lo fa ad una barra di scorrimento che funziona bene. Ecco la soluzione perfetta che ho trovato:

Creare due div. Un div interiore che è sufficientemente ampia per gestire la linea più ampia di testo e poi uno esterno più piccolo, che agisce a supporto del div interno:

<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:500px;"> 
    <div style="width:800px;"> 

    now really long text like this can be put in the text area and it will really <br/> 
    look and act more like a real text area bla bla bla <br/> 

    </div> 
</div> 

Answer 7

Se si utilizza bootstrap basta aggiungere form-control classe. Ad esempio:

class="form-control"