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

Estoy tratando de desactivar el redimensionamiento de textarea 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.

 111
htmltextarea
Author: allicarn, 2012-07-09
Source

7 answers

Pruebe este CSS para deshabilitar el redimensionamiento

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 asignarlo a un único área de texto por nombre (donde está el área de texto HTML): 

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

O por id (donde está el textarea HTML): 

#foo {
    resize: none;
}

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

 227
Author: feco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-12 01:12:33

Esto hará su trabajo 

  textarea{
        resize:none;
    }

introduzca la descripción de la imagen aquí

 18
Author: Rab,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-10 16:44:51

CSS3 puede resolver este problema. Desafortunadamente, solo es compatible con el 60% de los navegadores utilizados hoy en día.

Para IE e iOS no puede desactivar el cambio de tamaño, pero puede limitar la dimensión textarea configurando su width y height.

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

Ver Demo

 7
Author: Oriol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-01 20:59:19

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

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

El valor predeterminado es true.

 3
Author: Thusitha Wickramasinghe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-21 05:23:10

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 esta solución podría no funcionar en todos los navegadores que desee admitir. Puede consultar la lista de soporte para resize aquí: http://caniuse.com/#feat=css-resize

 2
Author: Darlesson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-18 22:04:35 
//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>

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

 0
Author: nobody,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-18 18:46:42

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";
 0
Author: Mano,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-06 07:05:52