html - propiedades - textarea javascript




¿Cómo deshabilitar la propiedad de tamaño variable de textarea? (11)

Añadiendo! Important hace que funcione:

width:325px !important; height:120px !important; outline:none !important;

El esquema es solo para evitar el contorno azul en ciertos navegadores.

Quiero deshabilitar la propiedad de tamaño variable de un área de textarea .

Actualmente, puedo cambiar el tamaño de un área de textarea haciendo clic en la esquina inferior derecha del área de textarea y arrastrando el mouse. ¿Cómo puedo deshabilitar esto?


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

Para IE y iOS, no puede desactivar el cambio de tamaño, 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 demo


Con @style , puede darle un tamaño personalizado y deshabilitar la función de cambio de (resize: none;) .

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

En CSS ...

textarea {
    resize: none;
}

Esto se puede hacer en html fácil.

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

Esto funciona para mi El valor predeterminado es true para el atributo draggable .


La siguiente regla CSS desactiva el comportamiento de cambio de tamaño para los elementos de área de textarea :

textarea {
  resize: none;
}

Para deshabilitarlo para algunos (pero no todos) los textarea , hay un par de opciones .

Para deshabilitar un área de textarea específica con el atributo de name establecido en foo (es decir, <textarea name="foo"></textarea> ):

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

O, usando un atributo de id (es decir, <textarea id="foo"></textarea> ):

#foo {
  resize: none;
}

La página W3C enumera los valores posibles para las restricciones de tamaño: ninguno, ambos, horizontal, vertical y heredado:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Revise una página de compatibilidad decente para ver qué navegadores admiten actualmente esta función. Como Jon Hulka ha comentado, las dimensiones se pueden restringir aún más en CSS usando max-width, max-height, min-width y min-height.

Super importante saber:

Esta propiedad no hace nada a menos que la propiedad de desbordamiento no sea visible, que es la predeterminada para la mayoría de los elementos. Por lo general, para usar esto, tendrá que configurar algo como desbordamiento: desplazamiento;

Cita de Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/


Para deshabilitar la propiedad de cambio de tamaño, use la siguiente propiedad de CSS:

resize: none;
  • Puede aplicar esto como una propiedad de estilo en línea como tal:

    <textarea style="resize: none;"></textarea>
    
  • o entre etiquetas de elementos <style>...</style> así:

    textarea {
        resize: none;
    }
    

Puedes probar con jQuery también

$('textarea').css("resize", "none");

Si necesitas un apoyo profundo puedes usar la técnica de la vieja escuela.

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}

Simplemente utiliza: resize: none; en tu CSS.

La propiedad de cambio de tamaño especifica si un elemento es o no redimensionable por el usuario.

Nota: la propiedad de cambio de tamaño se aplica a los elementos cuyo valor de desbordamiento calculado es distinto de "visible".

También el tamaño no es compatible con IE en este momento.

Aquí hay diferentes propiedades para cambiar el tamaño:

No cambiar el tamaño:

textarea { 
  resize: none; 
}

Cambiar el tamaño de ambas maneras (vertical y horizontalmente):

textarea { 
  resize: both; 
}

Redimensionar verticalmente:

textarea { 
  resize: vertical; 
}

Redimensionar horizontalmente:

textarea { 
  resize: horizontal; 
}

Además, si tiene width y height en su CSS o HTML, evitará que su área de texto sea redimensionada, con un soporte más amplio para los navegadores.


<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>




css