Вот наконец-то руки дошли до скрипта, которым пользуюсь давно. Его изначально написал Леонид Шевцов.
Но он сделал только растягивание по вертикали. Меня это немного не устраивало и я решил модернизировать скрипт так, что бы текстовое поле можно было растягивать по высоте и ширине одновременно.
Вот как оно выглядит теперь:
Разметка:
Что бы использовать данный скирпт нужно вставить в код страницы textarea и картинку, за которую пользователь и будет "тянуть". Ниже приведу код и таблицу стилей, которые я использовал.
Но он сделал только растягивание по вертикали. Меня это немного не устраивало и я решил модернизировать скрипт так, что бы текстовое поле можно было растягивать по высоте и ширине одновременно.
Вот как оно выглядит теперь:
Разметка:
Что бы использовать данный скирпт нужно вставить в код страницы textarea и картинку, за которую пользователь и будет "тянуть". Ниже приведу код и таблицу стилей, которые я использовал.
<style>
.ta_text{
width: 320px;
height:100px;
overflow: auto;
//Убираем все отступы что бы сделать максимально кроссбраузерно
margin:0;
padding:0;
}
.resizer{
//Двигаем картинку на нужное место
position: relative;
top:5px;
right: 17px;
cursor: se-resize;
}
style>
//Следующие две строчки надо вставить в код страницы в нужное место
<textarea name="text" class="ta_text" id="text">textarea>
<img src="../images/resizer.gif" class="resizer" onMouseDown="textareaResizer(event, 'text');">
?>
Собственно сам скрипт:
var minH=50;// Минимальная высота поля
var minW=320;// Минимальная ширина поля
var startH=0;
var startW=0;
var startY=0;
var startX=0;
var textarea=null;
var oldMouseMove=null;
var oldMouseUp=null;
function textareaResizer(e, id){
if (e == null) { e = window.event }
if (e.preventDefault)
{
e.preventDefault();
}
textarea = document.getElementById(id);
startY=e.clientY;
startX=e.clientX;
startH=textarea.offsetHeight;
startW=textarea.offsetWidth;
document.onmousemove=textareaResizer_moveHandler;
document.onmouseup=textareaResizer_cleanup;
return false;
}
function textareaResizer_moveHandler(e){
if (e == null) { e = window.event }
if (e.button<=1)
{
curH=(startH+(e.clientY-startY));
curW=(startW+(e.clientX-startX));
if (curH<minH) curH=minH;
if (curW<minW) curW=minW;
textarea.style.width=curW+'px';
textarea.style.height=curH+'px';
return false;
}
}
function textareaResizer_cleanup(e) {
document.onmousemove=oldMouseMove;
document.onmouseup=oldMouseUp;
}
?>
Уверен, что данный скрипт поможет многим.
Рабочий вариант можно скачать себе: textarea resizer.