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