динамическое 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, время: 00:43. |