есть в друпале такая фича - задаёшь textarea класс и её нижняя кромка превращается в таскабельный прямоугольник, за который можно тянуть мышью и тем самым менять размер textarea. как поюзал - теперь мучаюсь ужасно от нехватки этой фичи в других веб-приложениях, типа того же phpmyadmin, в котором зачастую очень сложно просматривать запрос в маленькой textarea. в друпале эта хрень реализована на основе jquery и зашита где-то в движке. мне ужасно лень рыться и доставать её оттуда, поэтому создаю эту тему - может у кого-нибудь есть готовая реализация непосредственно фичи? и очень желательно чтобы обходилась без jquery. либо выкладывайте плз свои предположения по поводу того, как такое реализовать без jquery - и я этим займусь.. потом добавлю в phpmyadmin и выложу патч
на ачате есть прикол в расширенной форме ответа, типа внизу под текстареа, две надписи, жмякаяшь на одну, она увеличивает размер текстареа, жмякаешь на вторую уменьшает... может быть поможет?
Пока такое нашел, чо найду еще - напишу Растягивающийся 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.fontSize)*(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
во) нарисовал: PHP: <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 А с перетаскиванием это нужно с Plug & Play. Щас попробую замутить)
Pashkela спасибо, оч. красивое решение а вот второе с джиквери - имхо отстой, при учете наличия первого. мало того что требуется наличие jquery+plugin 57 kb --- (у меня в движке страницы по 3 кб весят!) так ещё и глючно: бордер у текстареи пропадает, сначала ваще не мог понять где текстарея, а когда несколько раз пощёлкал ентер скрипт завис и низ текстареи до сих пор подёргивается на месте.. blaga ага, видел. по-моему админам пофигу на мелкие глюки ачата - там текст сливается с фоном, в редактировании поста я могу видеть свою старую подпись, хотя движок её не показывает больше нигде. .:EnoT:. научил меня как правильно менять значение, содержащее 'px' В общем, пока, самое первое решение Pashkela - лучшее, но думаю можно найти подобное - красивое и минималистичное - для того чтобы тягать текстарею мышкой. Все понимают что я имею ввиду? на http://drupal.ru/ есть такая арея, но там надо регаться, чтобы её увидеть. вот она к примеру здесь: http://drupal.ru/node/24005?destination=node%2F24005
Вот простой пример растягивание textarea по вертикали Code: <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);"> </div> </div> </body> </html>
Дикс, ты постоянно говоришь про друпал. Что тебе мешает выдрать этот код из друпала? Имхо ставь на jquery, я свой двиг тоже делаю и там его использую
я говорил что в моём движке страницы по 2-3 килобайта и не единой картинки? как думаешь, разумно будет подключать туда 30 кб jquery на каждой странице?
HTML: /* 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.height = 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.width = 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');