Jump to content
  • 0

Resizable input,textarea


.to4ka
 Share

Question

нужна такая реализация - чтобы можно было тянуть за края в ширину,высоту поле input например

Есть у кого что на памяти из готовых скриптов по данной тематике?

или может кто поможет в написании?

а то пока не нашел на ресурсах ajax подобный скрипт

очень нужно ну хоть какие-то движения в эту сторону..

спасибо заранее!

Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0

http://extjs.com/deploy/dev/examples/resizable/basic.html, второй сверху.

Библиотека весит много, ссылку привел для примера. Если вы обладаете логикой, то по нему можно догадаться, что инпут должен обкладываться слоями (или можно в таблицу, как удобнее).

На три крайних слоя (нижний, правый нижний угол, правый) назначаются соответствующие события (а можно и одно) с логикой DnD. А дальше дело техники.

Link to comment
Share on other sites

  • 0

Вот, написал упрощенный примерчик. Мне кажется, что получилось наглядно (для удобства - документ целиком):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" />
<script type='text/javascript'>
/*<![CDATA[*/

document.onmouseup = resizer;
document.onmousemove = function () { return false; };

function resizer(e) {
var target = (e = e || event).target || e.srcElement;
var coords = arguments.callee.coords;
if (e.type == 'mousedown' &&
target.tagName.toLowerCase() == 'div') {
arguments.callee.coords = [e.clientX, e.clientY];
} else if (e.type == 'mouseup' && coords && coords.length) {
var i = this.getElementsByTagName('textarea').item(0);
var w = i.offsetWidth - (coords[0] - e.clientX);
var h = i.offsetHeight - (coords[1] - e.clientY);
if (w > 0 && h > 0) {
i.style.width = w + 'px';
i.style.height = h + 'px';
};
coords.length = 0;
};
};

/*]]>*/
</script>
<style type='text/css'>
/*<![CDATA[*/
#dragger {
background-color:red;
padding:0 0 6px 0;
cursor:n-resize;
float:left;
}
#dragger div {
background-color:green;
padding:0 6px 0 0;
cursor:e-resize;
}
#dragger textarea {
_margin-top:-1px;
}
/*]]>*/
</style>
</head>
<body>

<div id='dragger' onmousedown='resizer(event);'>
<div>
<textarea cols='10' rows='10'></textarea>
</div>
</div>

</body>
</html>

Link to comment
Share on other sites

  • 0

спасибо за помощь

LokiDi L0ck

ccылку посмотрю. главное определится какой вариант использовать мне теперь

AKS а можете сделать возможность чтобы при ресайзе поле двигалось а то не очень юзабельно получается! а так то что надо.

Link to comment
Share on other sites

  • 0

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

может быть это легче и опять же есть уже готовые решения? ей богу опять ничего не могу найти в поисковиках. нахожу только топики за 2005годы где народ только пытается сделать.

в итоге нет решений нормальных.

в общем два метода по теме Resizable форм были бы кстати! на будующие проекты точно.

пришел к вам на форум за помощью/

AKS заранее спасибо!

Link to comment
Share on other sites

  • 0

заранее спасибо вам если вы можете дописать тот пример что вы сделали

чтобы когда тянем собственно тянулось поле - то есть видно было. а не потом когда отпускаем клавишу

--

а по теме второй так тоже буду всем в таком случае заранее благодарен.

вроде бы все

Link to comment
Share on other sites

  • 0

мил человек я спрашивал изначально про готовые варианты и уверен они есть

если человек написал добровольно быстренько то ему респект

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

Link to comment
Share on other sites

  • 0

Dynamic TEXTAREA height

<html>
<head>
<title>Dynamic TEXTAREA height - IE 5+</title>
<script>
function adjustTextareaHeight(t) {
var r = Math.max(2, Math.round(t.createTextRange().boundingHeight * t.rows / t.clientHeight) + 1);
if (t.rows != r) t.rows = r;
}
</script>
</head>
<body style="background-color:#c0c0c0">
<textarea cols="20" rows="2" style="overflow:hidden"
onpropertychange="if (event.propertyName == 'value') adjustTextareaHeight(this); ">
</textarea>
</html>

from http://xpoint.ru/forums/programming/javasc...read/7891.xhtml

то что надо. но как понимаю Опера не любит onpropertychange

а нужна кроссбраузерность 8(

кто чем помочь может? help!

что-то нашел здесь

http://dev.opera.com/forums/topic/184631

Link to comment
Share on other sites

  • 0

Помощь на любой конференции заключается в том, что вм помогают при условии наличия желания писать самому, либо уже при наличии написаного самим собой куском кода. А не привед?нному с другого форума. Боюсь, вам озвучат примерно тоже самое и на другой конференции. С миру по нитке, да?

Link to comment
Share on other sites

  • 0

так нет - хоть бы отклики были какие

что код говно и я не понимаю его и не помогу вам и тд.

да я в яве нуб. но что-то понимаю.

а то сидишь и думаешь либо тема мимо прошла и никто не может реализовать либо ждут пока денег предложат. хоть что-то.

Link to comment
Share on other sites

  • 0
...то есть я понял что на форуме за деньги тут помощь? =)
...хоть бы отписались что нет я не знаю или знаю но за деньги...
так нет - хоть бы отклики были какие...
...ждут пока денег предложат.

.to4ka, очевидно, что Вы не читали "классики", которая называется HOWTO :: Как правильно задавать вопросы. Мой Вам совет - прочтите хотя бы введение. И советую я потому, что уверен - в будущем это значительно облегчит вашу "форумную жизнь".

Link to comment
Share on other sites

  • 0

кхе кхе я тут ребят расcлабляюсь. ссылки на фак и вопросы я за свою форумную жизнь уже понакидал другим тоже. как правильно задавать вопросы и тд. это все bullshit для нубов.

устал от вашей классики.

мне просто нужна была помощь для одного проекта - написали бы сразу ответ.

пока всем.

Link to comment
Share on other sites

  • 0
И советую я потому, что уверен - в будущем это значительно облегчит вашу "форумную жизнь".

Мои надежды оказались напрасны - я несколько переоценил собеседника:

кхе кхе я тут ребят расcлабляюсь...

это все bullshit для нубов...

устал от вашей классики...

написали бы сразу ответ...

Значит отсутствие взаимопонимания - это не случайность, а закономерность.

Link to comment
Share on other sites

  • 0

Вообще, вот это:

кхе кхе я тут ребят расcлабляюсь...

написали бы сразу ответ...

тоже своего рода классика, причем с большой буквы! Замечательный пример (или урок) для остальных участников форума!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy