растягиваемая мышью текстареа (как?)

[Дикс]

есть в друпале такая фича - задаёшь textarea класс и её нижняя кромка превращается в таскабельный прямоугольник, за который можно тянуть мышью и тем самым менять размер textarea.

как поюзал - теперь мучаюсь ужасно от нехватки этой фичи в других веб-приложениях, типа того же phpmyadmin, в котором зачастую очень сложно просматривать запрос в маленькой textarea.

в друпале эта хрень реализована на основе jquery и зашита где-то в движке.
мне ужасно лень рыться и доставать её оттуда, поэтому создаю эту тему - может у кого-нибудь есть готовая реализация непосредственно фичи? и очень желательно чтобы обходилась без jquery.

либо выкладывайте плз свои предположения по поводу того, как такое реализовать без jquery - и я этим займусь.. потом добавлю в phpmyadmin и выложу патч :)

[blaga]

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

[Pashkela]

Пока такое нашел, чо найду еще - напишу

Растягивающийся textarea

Представим ситуацию когда пользователь вводит комментарий в textarea высотой 100px. Если комментарий умещается в эту область, то все отлично. Но если комментарий в несколько раз больше, то появляется прокрутка, которая может раздражать пользователя. Тогда можно растягивать textarea по высоте по мере заполнения. Вот так


// 500 - макс высота до которой будет растягиваться textarea
// 100 - изначальная высота textarea
<textarea style="width:600px; font-size:14px; height:100px;"
onkeyup="this.style.height=(a=(e=parseInt(this.style.fontSi ze)*(this.value.split('\n').length+2))
>(e2=500)?e2:e)<100?100:a;"></textarea>

Источник: http://ekimoff.ru/tag/javascript/

ну и в итоге то, что ты искал:

http://blogerstyle.com/jquery/avto-rastyagivayushheesya-pole-na-jquery


Авто-растягивающееся поле на jQuery

25.12.2008

Еще один плагин на jQuery, который мне по душе — Auto-Growing Textarea.

В отличие от плагинов, которые позволяют растягивать поле textarea вручную, Auto-Growing Textarea растягивает поле по мере добавления текста. На мой взгляд, это гораздо удобнее — и действий не надо лишних совершать и весь текст перед глазами )

<script type="text/javascript" src=".../jquery.js">
</script>
<script type="text/javascript" src=".../jquery.autogrow.js">
</script>
<script type="text/javascript">

$(document).ready (function() {
$('textarea.expanding').autogrow();
});
</script>

...

<textarea style="width: 300px; min-height: 100px;" class="expanding" name="myTextarea3"> <textarea>

[.:EnoT:.]

во) нарисовал:

<script type="text/javascript">
function size(size, num){

var field = document.getElementById('txt');
if(size == 'h'){

var height = field.style.height.replace('px', '');
field.style.height = parseInt(height) + num + 'px';

}else if(size == 'w'){

var width = field.style.width.replace('px', '');
field.style.width = parseInt(width) + num + 'px';

}
}
</script>

<form name="forma" method="get">
<textarea cols="50" rows="10" style="width:300px;height:150px" name="txt" id="txt"></textarea><br/>
Высота <a href="javascript: size('h', 100)">+</a> <a href="javascript: size('h', -100)">-</a><br/>
Ширина <a href="javascript: size('w', 100)">+</a> <a href="javascript: size('w', -100)">-</a>
</form>



Pashkela
желательно чтобы обходилась без jquery



А с перетаскиванием это нужно с Plug & Play. Щас попробую замутить)

[Дикс]

Pashkela
// 500 - макс высота до которой будет растягиваться textarea
// 100 - изначальная высота textarea
<textarea style="width:600px; font-size:14px; height:100px;"
onkeyup="this.style.height=(a=(e=parseInt(this.style.fontSi ze)*(this.value.split('\n').length+2))
>(e2=500)?e2:e)<100?100:a;"></textarea>
спасибо, оч. красивое решение

а вот второе с джиквери - имхо отстой, при учете наличия первого.
мало того что требуется наличие jquery+plugin 57 kb --- (у меня в движке страницы по 3 кб весят!) так ещё и глючно: бордер у текстареи пропадает, сначала ваще не мог понять где текстарея, а когда несколько раз пощёлкал ентер скрипт завис и низ текстареи до сих пор подёргивается на месте..

blaga
ага, видел.
по-моему админам пофигу на мелкие глюки ачата - там текст сливается с фоном, в редактировании поста я могу видеть свою старую подпись, хотя движок её не показывает больше нигде.

.:EnoT:.
научил меня как правильно менять значение, содержащее 'px' :)

В общем, пока, самое первое решение Pashkela - лучшее, но думаю можно найти подобное - красивое и минималистичное - для того чтобы тягать текстарею мышкой.

Все понимают что я имею ввиду?
на http://drupal.ru/ есть такая арея, но там надо регаться, чтобы её увидеть.
вот она к примеру здесь: http://drupal.ru/node/24005?destination=node%2F24005

[Дикс]

жаль что никто не знает =\

[cash$$$]

Вот простой пример растягивание textarea по вертикали

<html>
<head>
<style>
div.text_editor textarea
{
width: 398px;
height:100px;
} div.text_editor div {
background: #e2e2e2 url("resizer.gif") no-repeat;
background-position:center;
height:10px;
width:400px;
font-size:.01em;/* поправка высоты для IE */
cursor:s-resize;
}
</style>
<script src="textareaResizer.js"></script>
<title>Демонстрация textareaResizer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>Пример</h1>
<div class="text_editor">
<textarea name="text" id="ta_text">Этот textarea будет растягиваться по вертикали</textarea>
<div id="ta_text_resizer" onMouseDown="textareaResizer(event);">&nbsp;</div>
</div>
</body>
</html>

[Дикс]

cash$$$
а где: <script src="textareaResizer.js"></script ??

[Zedi]

Дикс, ты постоянно говоришь про друпал. Что тебе мешает выдрать этот код из друпала? Имхо ставь на jquery, я свой двиг тоже делаю и там его использую

[Дикс]

я говорил что в моём движке страницы по 2-3 килобайта и не единой картинки?
как думаешь, разумно будет подключать туда 30 кб jquery на каждой странице?

[bombeg]

/*

Resize Textarea 0.1
Original coding by Raik Juergens
Contact: borstel33@web.de

*/

var resizeTa =
{
loaded: null,
TAlength: 0,

init: function (){
if (resizeTa.loaded)
return;
else{
resizeTa.loaded = true;
var appcontent = document.getElementById("appcontent");
if(appcontent)
appcontent.addEventListener("load", resizeTa.pageload, true);
}
},

pageload: function (aEvent){
resizeTa.doc = aEvent.originalTarget;
resizeTa.TA = resizeTa.doc.getElementsByTagName('TEXTAREA');
resizeTa.TAlength = resizeTa.TA.length;
if(resizeTa.TAlength == 0){
return;
}else{
resizeTa.rootElem = resizeTa.doc.getElementsByTagName('HTML')[0];
var i = resizeTa.TAlength;
while(i--){
resizeTa.newdiv('5' ,'1' ,'gripH_',i,'w' );
resizeTa.newdiv('1' ,'5' ,'gripV_',i,'n' );
resizeTa.newdiv('10','10','gripX_',i,'se');
}
resizeTa.newdiv('0','0','showCursor','','w');
CursorDiv = resizeTa.doc.getElementById('showCursor');
CursorDiv.removeEventListener('mousedown', resizeTa.activate, true);
CursorDiv.style.left = '0px';
CursorDiv.style.top = '0px';
resizeTa.posdivs();
window.addEventListener("resize",resizeTa.posdivs,true);
}
},

newdiv: function (w,h,id,nr,cu){
var grip = resizeTa.doc.createElement("div");
grip.setAttribute("ID", id+nr);
grip.setAttribute("STYLE", "position:absolute;width:"+w+"px;height:"+h+"px;cursor:"+cu+"-resize");
grip.addEventListener('mousedown', resizeTa.activate, true);
resizeTa.rootElem.appendChild(grip);
},

getposition: function (i){
var curElem = resizeTa.TA[i];
var curX = curElem.offsetLeft;
while (curElem.offsetParent) {
curX += curElem.offsetParent.offsetLeft;
curElem = curElem.offsetParent;
}
curElem = resizeTa.TA[i];
var curY = curElem.offsetTop;
while (curElem.offsetParent) {
curY += curElem.offsetParent.offsetTop;
curElem = curElem.offsetParent;
}
return [curX,curY]
},

posdivs: function (){
var k = resizeTa.TAlength;
while(k--){
curPos = resizeTa.getposition(k);
resizeTa.doc.getElementById('gripH_'+k).style.left = curPos[0]+resizeTa.TA[k].offsetWidth -3 + "px";
resizeTa.doc.getElementById('gripH_'+k).style.top = curPos[1] + "px";
resizeTa.doc.getElementById('gripH_'+k).style.heig ht = resizeTa.TA[k].offsetHeight-8 + "px";
resizeTa.doc.getElementById('gripV_'+k).style.left = curPos[0] + "px";
resizeTa.doc.getElementById('gripV_'+k).style.top = curPos[1]+resizeTa.TA[k].offsetHeight-3 + "px";
resizeTa.doc.getElementById('gripV_'+k).style.widt h = resizeTa.TA[k].offsetWidth -8 + "px";
resizeTa.doc.getElementById('gripX_'+k).style.left = curPos[0]+resizeTa.TA[k].offsetWidth -8 + "px";
resizeTa.doc.getElementById('gripX_'+k).style.top = curPos[1]+resizeTa.TA[k].offsetHeight-8 + "px";
}
},

activate: function (e){
resizeTa.doc = e.target.ownerDocument;
resizeTa.TA = resizeTa.doc.getElementsByTagName('TEXTAREA');
CursorDiv = resizeTa.doc.getElementById('showCursor');
resizeTa.TAlength = resizeTa.TA.length;
var curTargetId = e.target.getAttribute('ID').split("_");
curTarget = curTargetId[0];
curTA_Nr = parseInt(curTargetId[1]);
resizeTa.doc.addEventListener('mouseup', resizeTa.deactivate, true);
switch(curTarget){
case "gripH": resizeTa.doc.addEventListener('mousemove', resizeTa.resizeta_h, true); break;
case "gripV": resizeTa.doc.addEventListener('mousemove', resizeTa.resizeta_v, true); break;
case "gripX": resizeTa.doc.addEventListener('mousemove', resizeTa.resizeta_x, true); break;
}
CursorDiv.style.width = resizeTa.rootElem.offsetWidth + "px";
CursorDiv.style.height = resizeTa.rootElem.offsetHeight + "px";
CursorDiv.style.cursor = e.target.style.cursor;
},

deactivate: function (){
resizeTa.doc.removeEventListener('mouseup', resizeTa.deactivate, true);
switch(curTarget){
case "gripH": resizeTa.doc.removeEventListener('mousemove', resizeTa.resizeta_h, true); break;
case "gripV": resizeTa.doc.removeEventListener('mousemove', resizeTa.resizeta_v, true); break;
case "gripX": resizeTa.doc.removeEventListener('mousemove', resizeTa.resizeta_x, true); break;
}
CursorDiv.style.width = '0px';
CursorDiv.style.height = '0px';
resizeTa.posdivs();
},

resizeta_h: function (e){
curPos = resizeTa.getposition(curTA_Nr);
resizeTa.TA[curTA_Nr].style.width = e.pageX - curPos[0] + "px";
},

resizeta_v: function (e){
curPos = resizeTa.getposition(curTA_Nr);
resizeTa.TA[curTA_Nr].style.height = e.pageY - curPos[1] + "px";
},

resizeta_x: function (e){
curPos = resizeTa.getposition(curTA_Nr);
resizeTa.TA[curTA_Nr].style.width = e.pageX - curPos[0] + 2 + "px";
resizeTa.TA[curTA_Nr].style.height = e.pageY - curPos[1] + 2 + "px";
}
}

window.addEventListener("load",resizeTa.init,false);

с аддевент сам разберешься думаю.

[Дикс]

странный код

---
var grip = resizeTa.doc.createElement("div");
grip.setAttribute("ID", id+nr);
---

у меня браузер никогда не обращался по ИД к динамически созданной ноде корректно.

потом, прекращение скрипта у меня заканчивается на
----
if(appcontent)
appcontent.addEventListener("load", resizeTa.pageload, true);
---
что за событие лоад?
документ ведь уже ззагружен

---
window.addEventListener("load",resizeTa.init,false);
---
и весь скрипт вызывается после load?

и в конце концов, даже если вызвать "esizeTa.pageload" кликом:

firebug, ff3:
Permission denied to call method HTMLDivElement.getElementsByTagName
[Break on this error]
resizeTa.TA = resizeTa.doc.getElementsByTagName('TEXTAREA');