html propiedades - ¿Cómo deshabilitar la propiedad de tamaño variable de textarea?




ejemplo input (14)

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

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?


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.


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 .


Puedes probar con jQuery también

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

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.


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;
    }
    

CSS3 tiene una nueva propiedad para elementos de la interfaz de usuario que le permitirá hacer esto. La propiedad es la propiedad de cambio de tamaño . Por lo tanto, debe agregar lo siguiente a su hoja de estilo para desactivar el cambio de tamaño de todos los elementos de área de texto:

textarea { resize: none; }

Esta es una propiedad CSS3; Usa una tabla de compatibilidad para ver la compatibilidad del navegador.

Personalmente, me resultaría muy molesto tener el cambio de tamaño deshabilitado en los elementos de área de texto. Esta es una de esas situaciones en las que el diseñador intenta "romper" el cliente del usuario. Si su diseño no puede adaptarse a un área de texto más grande, es posible que desee reconsiderar cómo funciona su diseño. Cualquier usuario puede agregar textarea { resize: both !important; } textarea { resize: both !important; } a su hoja de estilo de usuario para anular su preferencia.


Encontré 2 cosas

primero

textarea{resize:none}

este es un css3 que aún no se ha lanzado compatible con Firefox4 + chrome y safari

otra función de formato es el overflow:auto para deshacerse de la barra de desplazamiento derecha teniendo en cuenta el atributo dir

Código y diferentes navegadores.

Html basico

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Algunos navegadores

  • IE8

  • FF 17.0.1

  • cromo


prueba esto:

#foo {
    resize: none;
}
<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>


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;" })

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;
}

Solo usa resize: none

textarea {
   resize: none;
}

También puede decidir cambiar el tamaño de sus áreas de texto solo horizontal o vertical, de esta manera:

textarea { resize: vertical; }

textarea { resize: horizontal; }

Finalmente, resize: both habilita el capturador de redimensionamiento.







html css