Desactivar el cambio de tamaño del área de texto

117

Estoy intentando desactivar el cambio de tamaño del área de texto en mi sitio; ahora mismo estoy usando este método:

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

Sé que mi método no es correcto y estoy buscando uno mejor en JavaScript. Soy un principiante, por lo que la mejor solución para mí será HTML5 o jQuery.

html textarea

— Mago
fuente

253

Pruebe este CSS para deshabilitar el cambio de tamaño

El CSS para deshabilitar el cambio de tamaño para todas las áreas de texto se ve así:

textarea {
    resize: none;
}

En su lugar, podría simplemente asignarlo a un solo área de texto por nombre (donde está el HTML del área de texto):

textarea[name=foo] {
    resize: none;
}

O por id (donde está el HTML del área de texto):

#foo {
    resize: none;
}

Tomado de: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

— feco
fuente

7

En lugar de simplemente vincularlo a una solución, debería explicarlo un poco aquí. Muchas otras personas que miran esta pregunta en el futuro no se molestarán en hacer clic en un enlace para obtener una respuesta. Agrega algunos detalles aquí y haré +1 en tu respuesta.

— Jon Egeland

21

esto hará tu trabajo

  textarea{
        resize:none;
    }

ingrese la descripción de la imagen aquí

— Raab
fuente

8

CSS3 puede resolver este problema. Desafortunadamente, solo es compatible con el 60% de los navegadores usados en la actualidad.

Para IE e iOS, no puede desactivar el cambio de tamaño, pero puede limitar la textareadimensión configurando su widthy height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

Ver demostración

— Oriol
fuente

2

Se puede hacer fácilmente con solo usar el atributo html arrastrable

<textarea name="mytextarea" draggable="false"></textarea>

El valor predeterminado es verdadero.

— Thusitha Wickramasinghe
fuente

2

La pregunta es sobre cambiar el tamaño del área de texto, no arrastrar y soltar. Entonces, como era de esperar, establecer este atributo en un área de texto no funciona en Chrome (al menos).

— peveuve

2

Solo una opción adicional, si desea revertir el comportamiento predeterminado para todas las áreas de texto en la aplicación, puede agregar lo siguiente a su CSS:

textarea:not([resize="true"]) {
  resize: none !important;
}

Y haga lo siguiente para habilitar dónde desea cambiar el tamaño:

<textarea resize="true"></textarea>

Tenga en cuenta que es posible que esta solución no funcione en todos los navegadores que desee admitir. Puede consultar la lista de soporte resizeaquí: http://caniuse.com/#feat=css-resize

— Darlesson
fuente

1

Según la pregunta, he enumerado las respuestas en javascript

Seleccionando TagName

document.getElementsByTagName('textarea')[0].style.resize = "none";

Seleccionando Id

document.getElementById('textArea').style.resize = "none";

— Mano
fuente

0

//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

el código anterior funciona en la mayoría de los navegadores

//HTML:
<textarea id='textarea' draggable='false'></textarea>

haz ambas cosas para que funcione en el número máximo de navegadores

— nadie
fuente

0

Esto funciona para mi

<textarea
  type='text'
  style="resize: none"
>
Some text
</textarea>

Expandir fragmento

— Kordrad
fuente