2011-01-02 18 views
5

Hay algunos inconvenientes al utilizar textarea y el texto de entrada como entrada de formularios de texto. textarea tiene un pequeño triángulo molesto en la esquina inferior derecha y el texto de entrada es una entrada de una sola línea.¿Cómo hacer un div a un formulario de entrada de texto?

Intento tener una entrada de texto como el formulario de entrada de actualización de Facebook. La entrada cambia el tamaño automáticamente después de los saltos de línea. Y el elemento o etiqueta utilizada fue <div>. Dije "usado" porque, después de rediseñar Facebook, no puedo entender qué etiqueta se usa ahora. Hay una propiedad CSS que permite al usuario editar el texto en un elemento div. De hecho, copié la propiedad CSS, pero ahora la perdí. ¿Puede alguien decirme qué propiedad de CSS era? Tengo una memoria débil que comenzó con el prefijo -webkit aunque

+0

Para averiguar qué elemento es, con Chrome, Safari y Firefox (probablemente también Opera), haga clic con el botón derecho en el elemento y, desde el menú contextual, seleccione 'Inspeccionar elemento' (u opción equivalente). En Facebook, definitivamente es un 'textarea'. –

Respuesta

17

Si utiliza html5 puede utilizar:

<div id="divThatYouCanWriteStuffIn" contenteditable> 
<!-- you can write in here --> 
</div> 

Si se combina esto con el css:

#divThatYouCanWriteStuffIn { 
    min-height: 4em; /* it should resize as required from this minimum height */ 
} 

para deshacerse del 'pequeño triángulo molestos' en textarea s:

textarea { 
    resize: none; 
} 

JS Fiddle demo of both ideas.

+0

ok gracias! Esta información fue muy útil. – einstein

+0

esta es una de las mejores cosas que me han pasado hoy. ¡Gracias un montón! –

1

Sé que usted puede hacer esto en javascript haciendo getElementByID('mydiv').contentEditable='true';, pero no sé cómo esto se haría en CSS

+0

Por lo que sé, no es posible con CSS. Puede configurarlo en línea tho. '

' – JCOC611

+0

Sí funcionó, pero ¿cómo cambio el tamaño automáticamente después de los saltos de línea? Sin desplazamiento, sin embargo, – einstein

+0

CSS style 'height: auto'? – JCOC611

0

El campo de entrada de la actualización de Facebook es un elemento TEXTAREA. El truco es usar la propiedad resize:

textarea { resize:none; } 

que hará que el triángulo desaparecen.

0

Usted debe ser capaz de añadir a su estilo a un área de texto como se hace con las etiquetas como p, h1, h2, etc ..

para que pueda orientar todas las áreas de texto o con las clases o los identificadores específicos sobre ellos

ejemplo:

textarea { 
    font-size:11px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-weight:normal; 
    line-height:140%; 
    color:black; 
    margin:0 0 5px 5px; 
    padding:5px; 
    background-color:#999999; 
    border:1px solid black; 
} 

Este ejemplo se dirigirá a todos los áreas de texto en la página. Cambie textarea a .nameOfClass o #nameOfId si desea orientar una clase o una identificación.

Espero que esto ayude.

Cuestiones relacionadas