Растягивание textarea во все стороны

10 минут гугления привели меня на страницу плагина для jquery Позволяет ресайзить элемент во все стороны.

Пример вызова:

$("selector").resizable({
    side : { Default value : true to each one
        top : true | false,
        left: true | false,
        bottom : true | false,
        right : true | false
    },
    disabled : true | false, //call to disable or enable
    aspectRatio : true | false | number, //that is width / height (ex 1.5)
    distance :: number, //sensible band-width in pixels
    grid : false | [xValue, yValue], //false or grid magnet [x, y]
    maxHeight: number, //default value:null
    maxWidth: number, //default value:null
    minHeight: number, //default value:10
    minWidth: number, //default value:10
});

Сам плагин если не нашли лежит по ссылке тут

Саму текстарию, скорее всего, вам не удастся апгрейдить до такого вида, поэтому делаете див с атрибутом contenteditable="true"

Кладете его в див, на который потом наложите плагин. Если вам нужен именно такой конечный вид, который изображен на вашем скрине, то кладете еще 8 абсолютных дивов внутрь. Каждый из этих дивов должен иметь бекграунд квадратика. 4 угловых дива и 4 дива на стороны. Дивы по сторонам должны иметь атрибут бекграунда по середине, чтобы всегда быть в центре.

Должно получиться что-то типа этого:

html:

<div class="resizable">
    <div class="editable" contenteditable="true"></div>
    <div class="lt"></div>
    <div class="rt"></div>
    <div class="rb"></div>
    <div class="lb"></div>
    <div class="t"></div>
    <div class="r"></div>
    <div class="b"></div>
    <div class="l"></div>
</div>

css:

.resizable{position: relative; border: 1px dashed grey;}
.editable{position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.lt{background-image: квадратик; position: absolute; left: 0; top: 0;}
// по аналогии все угловые дивы кладете по углам
.t{background-image: квадратик; background-position: center center; position: absolute; left: 0; right: 0;}
// по аналогии все сайдовые дивы кладете по сторонам

js:

$(function(){
    $('.resizable').resizable();
});

Даже такой ответ лучше, чем писать, что тут никто работу за вас не сделает, не правда ли?

Это делается скриптами. И не на textarea, а на блоке с атрибутом contenteditable.

У textarea c высотой всегда были проблемы, но можно соорудить такое:

<textarea style="min-height:500px; width: 100%;">
    Test text
</textarea>