La propiedad resize
En CSS existe una propiedad llamada resize ( redimensionar ), y los elementos <textarea>, por definición tienen resize: both;. O sea: podemos redimensionar tanto la altura como la anchura del elemento agarrando y estirando la esquina abajo derecha de este.
Podemos desactivar este comportamiento utilizando resize: none.
textarea {
resize: none;
}Por de otra parte los demás elementos tienen por defecto resize: none, o sea: no son redimensionables; pero podemos transformar casi cualquier otro elemento en un elemento redimensionable con dos condiciones:
1. El overflow del elemento NO tiene que ser visible.
2. La propiedad resize tiene que tomar uno de estos valores: horizontal, vertical o both ( redimensionable en ambas direcciones ).
.redimensionable {
width:10em;
height:6em;
margin:1em;
border:1px solid #d9d9d9;
/* overflow puede tomar cualquier valor excepto visible*/
overflow:hidden;
/*resize puede ser: horizontal, vertical o both */
resize:both;
}Un falso textarea
Ahora podemos fácilmente transformar el div.redimensionable en un falso textarea utilizando el atributo contenteditable="true". Esto hace que el contenido de este div sea editable.
<div class="redimensionable" contenteditable="true" ></div>Hay excepciones
Un elemento <img> no puede ser transformado en un elemento redimensionable, pero podemos ponerlo dentro de otro elemento redimensionable, un <div> por ejemplo.
See the Pen CSS resize & contenteditable by Gabi (@enxaneta) on CodePen.
En JavaScript
Por lastima en este momento en JavaScript no existe ningún evento que detecte si el tamaño de un elemento ha cambiado.