¿Cómo puedo hacer que un DIV editable se vea como un campo de texto?

82

Tengo un DIVque tiene contentEditable=truepara que el usuario pueda editarlo. El problema es que no parece un campo de texto, por lo que es posible que el usuario no tenga claro que se puede editar.

¿Hay alguna manera de que pueda diseñar el DIVpara que le parezca al usuario un campo de entrada de texto?

html css cordura
fuente
2
fondo: blanco; borde: 1px sólido # 666; cursor: texto; ? : P ver mi demostración
mkk
Supongo que lo haré parecer un textarea? jsfiddle.net/vwPgT
Jared Farrish
1
@mkk - Podría ayudar un poco si agrega un texto de muestra: jsfiddle.net/ZevvE/1
Jared Farrish
@Jared :) ¡buen trabajo! ;-) Ahora es mucho más difícil de confundir con div .. oh Es un div, se me olvidó :)
mkk
@mkk - Personalmente creo que mi demo es más clara, pero bueno, es lo que es.
Jared Farrish

Respuestas:

125

Estos tienen el mismo aspecto que sus contrapartes reales en Safari, Chrome y Firefox. Se degradan con gracia y también se ven bien en Opera e IE9.

Demostración: 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>

Salida:

ingrese la descripción de la imagen aquí

Pensando rígido
fuente
1
¿Qué hacen exactamente -webkit-small-control y medium -moz-fixed ? Parecen hacer que el aspecto de la fuente monoespaciado en Firefox v13.0
Hengjie
1
@Hengjie Esos son los estilos predeterminados que usan los navegadores al mostrar campos de entrada.
ThinkingStiff
1
aquí hay un caso de uso, intente copiar y pegar el contenido html en ellos. Verás la diferencia.
Praveen
1
También debería agregar - fondo: blanco;
Brana
1
¿Qué pasa si quiero otro div dentro de este div, que no quiero que sea editable?
FrenkyB
21

Si usa bootstrap, simplemente agregue form-controlclass. Por ejemplo:

class="form-control"
paraplu
fuente
Esta es una gran respuesta y creo que es la más limpia. Mi voto es que esta sea la respuesta correcta.
aholtry
¿Alguna forma de permitir al usuario expandir el área? El área de texto normal hace esto.
MARTE
14

En WebKit, puede hacer: -webkit-appearance: textarea;

Abhi Beckert
fuente
10
Bueno, eso es demasiado conveniente.
Jared Farrish
3

Podrías optar por una sombra de caja interior:

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

Actualicé el jsfiddle de Jarish: http://jsfiddle.net/ZevvE/2/

sincronización
fuente
1

Sugeriría esto para que coincida con el estilo de Chrome, extendido del ejemplo de Jarish. Observe la propiedad del cursor que se omitieron en las respuestas anteriores.

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;
Robert Waddell
fuente
0

Puede colocar un TEXTAREA de tamaño similar debajo de su DIV, por lo que el marco del control estándar sería visible alrededor de div.

Probablemente sea bueno configurarlo para que esté desactivado, para evitar el robo de enfoque accidental.

wizzard0
fuente
Sí, no estoy seguro de que esto sea lo que el OP está buscando en la respuesta.
Jared Farrish
Si desea que el campo de texto se escale automáticamente con el contenido del div, esto se está poniendo difícil.
horario del
0

El problema con todo esto es que no abordan si las líneas de texto son largas y mucho más anchas que el desbordamiento de div: auto no incluye una barra de desplazamiento que funcione correctamente. Aquí está la solución perfecta que encontré:

Crea dos divs. Un div interno que es lo suficientemente ancho para manejar la línea más ancha de texto y luego uno externo más pequeño que actúa en el soporte 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>
evan toder
fuente