html - ejemplo - Desactiva el redimensionamiento textarea

textarea javascript

Question

Estoy intentando desactivar el cambio de tamaño de textarea en mi sitio; ahora 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, así que la mejor solución para mí será HTML5 o jQuery.

Answer 1

CSS3 puede resolver este problema. Desafortunadamente, solo se admite en el 60% de los navegadores usados ​​en la actualidad.

Para IE e iOS no puede desactivar el redimensionamiento, pero puede limitar la dimensión del área de texto estableciendo su width y height .

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

Ver demostración

Answer 2

Puede hacerlo fácilmente con solo usar el atributo html draggable

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

El valor predeterminado es verdadero.

Answer 3

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

Al seleccionar TagName

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

Al seleccionar Id

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

Answer 4

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 donde 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. Puede consultar la lista de compatibilidad para resize aquí: http://caniuse.com/#feat=css-resize

Answer 5

esto hará tu trabajo

 textarea{
resize:none;
}

Answer 6

Prueba este CSS para desactivar 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, puede asignarlo a un solo área de texto por nombre (donde está el HTML de texto):

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

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

#foo {
resize: none;
}

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

Answer 7

//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>

hacer ambas cosas para que funcione en la cantidad máxima de navegadores