Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   динамическое textarea (https://javascript.ru/forum/dom-window/10548-dinamicheskoe-textarea.html)

watt 09.07.2010 02:26

динамическое textarea
 
Добрый вечер ;)
имеется функция для изменения ширины textarea

function OnNeedResizeTextArea(id) {
var target = document.getElementById(id);
target.style.height = target.scrollHeight + "px";
}


Очень хотелось бы знать, существует ли способ отловить действия удаления текста и точно так же уменьшать высоту textarea.

exec 09.07.2010 06:33

onchange

Hagrael 09.07.2010 06:43

Интересная задача ( но я её решить конечно не смогу((( ).

Hagrael 09.07.2010 06:50

exec,
насколько я знаю, onchange реагирует на изменение строчки, а ему надо на уменьшение символов. О! Есть идея, как отловить уменьшение.
Создаёшь функцию, происходящую после изменения textarea, в ней пишешь
"var text=document.getElementById(id) // Создаёшь объект - текстовое поле
var value=text.value // Создаёшь объект - его значение
if (value/text.rows>text.cols) {text.rows-=1}"
В итоге получится такой код:
function onch(id) {
var text=document.getElementById(id) // Создаёшь объект - текстовое поле
var value=text.innerHTML // Создаёшь объект - его значение
if (value/text.rows>text.cols) {text.rows-=1}
}

<textarea onChange="onch(this.id)" id="1(к примеру)"></textarea>

Вроде должно работать, но ничего не обещаю.

Hagrael 09.07.2010 08:59

Хм... Я попробовал, и почему-то value=text.innerHTML не работает( Ведь у textarea текст заключён между открытием и закрытием! В чём дело?

Sweet 09.07.2010 10:19

Hagrael, что-то вы какую-то ерунду творите:) Передавать функции id элемента, чтобы потом получить его через getElementById. Бред! "id="1(к примеру)" - плохой пример. Если вы не в курсе, id не может быть цифрой. Поэтому, наверное, и innerHTML не работает.
Цитата:

Сообщение от watt
имеется функция для изменения ширины textarea

, которая меняет высоту. Не странно ли?:)
А по теме:
<textarea onKeydown="this.style.height = this.scrollHeight + 'px';"></textarea>

watt 12.07.2010 15:41

Нашёл прототип к jquery, но подключать только ради этого саму библиотеку не хочется.


(function($) {
$.fn.autogrow = function(options) {
        
this.filter('textarea').each(function() {
var $this       = $(this),
minHeight   = $this.height(),
lineHeight  = $this.css('lineHeight');
            
var shadow = $('<div></div>').css({
position:   'absolute',
top:        -10000,
left:       -10000,
width:      $(this).width() - parseInt($this.css('paddingLeft')) - parseInt($this.css('paddingRight')),
fontSize:   $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight'),
resize:     'none'
}).appendTo(document.body);
            
var update = function() {
var times = function(string, number) { for (var i = 0, r = ''; i < number; i ++) r += string; return r; };
var val = this.value.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/&/g, '&amp;')
.replace(/\n$/, '<br/>&nbsp;')
.replace(/\n/g, '<br/>')
.replace(/ {2,}/g, 
function(space) { return times('&nbsp;', space.length -1) + ' ' });
shadow.html(val);
$(this).css('height', Math.max(shadow.height() + 20, minHeight)); }

$(this).change(update).keyup(update).keydown(update);
update.apply(this); });
return this; } })(jQuery);


<textarea rows='6' style='line-height:1; font-size: 120%; width: 100%'></textarea>

кто знаком с jq подскажите, как заменить функции jq обычными dom?
на ум приходит что-то вроде этого:

var shadow = $('<div></div>').css({
position:   'absolute'...


-

var element = Document.createElement('div')
element.position:   'absolute'...

exec 12.07.2010 15:56

Цитата:

как
Платно.

watt 13.07.2010 03:50

Вдруг кто-нибудь столкнётся с аналогичной проблемой:
resize_textarea = function(е) {
  var t = document.getElementById(е);
  var d = document.getElementById(t.id+'_tmp');
  if (!d) {
    d = document.createElement('div');
    document.body.appendChild(d);
    d.id = t.id + '_tmp';
    d.setAttribute('style',
       'font-family: monospace;'
     + 'font-size: 17px;'
     + 'width: ' + (t.scrollWidth-20) + 'px;'
     + 'visibility: hidden;'
     + 'position: absolute;'
     + 'top: 0;');
  }
  d.innerHTML = t.value.replace(/\n/g,'<br/>');
  t.style.height = (d.offsetHeight+20) + 'px';
}


спасибо всем, кто принимал участие.


«— Почему у exec'a большой нос? — Потому что воздух бесплатный.» ;-)

exec 13.07.2010 06:23

Цитата:

Почему у exec'a большой нос? — Потому что воздух бесплатный.
Свою петросянщину оставь при себе.


Часовой пояс GMT +3, время: 05:24.