динамическое textarea
Добрый вечер ;)
имеется функция для изменения ширины textarea function OnNeedResizeTextArea(id) { var target = document.getElementById(id); target.style.height = target.scrollHeight + "px"; } Очень хотелось бы знать, существует ли способ отловить действия удаления текста и точно так же уменьшать высоту textarea. |
onchange
|
Интересная задача ( но я её решить конечно не смогу((( ).
|
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> Вроде должно работать, но ничего не обещаю. |
Хм... Я попробовал, и почему-то value=text.innerHTML не работает( Ведь у textarea текст заключён между открытием и закрытием! В чём дело?
|
Hagrael, что-то вы какую-то ерунду творите:) Передавать функции id элемента, чтобы потом получить его через getElementById. Бред! "id="1(к примеру)" - плохой пример. Если вы не в курсе, id не может быть цифрой. Поэтому, наверное, и innerHTML не работает.
Цитата:
А по теме: <textarea onKeydown="this.style.height = this.scrollHeight + 'px';"></textarea> |
Нашёл прототип к 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, '<') .replace(/>/g, '>') .replace(/&/g, '&') .replace(/\n$/, '<br/> ') .replace(/\n/g, '<br/>') .replace(/ {2,}/g, function(space) { return times(' ', 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'... |
Цитата:
|
Вдруг кто-нибудь столкнётся с аналогичной проблемой:
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 большой нос? — Потому что воздух бесплатный.» ;-) |
Цитата:
|
Часовой пояс GMT +3, время: 05:24. |