Изменение размеров поля textarea - вторая редакция.

Ранее я писал о принципе увеличения высоты поля textarea в зависимости от набранного текста. Зачем это нужно? Всегда приятнее видеть весь набранный (или скопированный) текст целиком, не задействуя прокрутку полей (фактически вторую, так как скроллинг самой страницы никто не отменял). Наблюдая картину целиком (или близко к тому), оценив объем и формат, можно с лёгкой душой приступать к опубликованию.

Принцип получил развитие: решил сделать более гибкую версию. Итак, существует две функции. Одна из них - sx_appendTextareas() - фиксирует поля textarea, у которых в составе класса находится слово "sizable" и в качестве обработчиков событий onkeyup и onchange делегирует другую функцию - sx_ajustSize() - которая, собственно, и подгоняет размер. Последняя динамически создаёт элемент div, с которого и снимается мерка (ранее он находился в тексте).

Замечу, что как только обработчики двух событий определены, происходит первая корректировка высоты: с помощью метода sx_fireEvent(obj, evt).

Листинг.

function sx_ajustSize() {

    var d = document.createElement('div');

    d.className = this.className;

    d.innerHTML = this.value.replace(/(\r\n|\r|\n)/g, "
") + "
";

    this.parentNode.appendChild(d);

    this.style.height = d.offsetHeight + 'px';

    d.style.display = 'none';

    d.remove();

}

function sx_appendTextareas() {

    taElements = document.getElementsByTagName("textarea");

    var taSizable = new Array();

    for (i = 0; i < taElements.length; i++) {

    if (taElements[i].className.indexOf("sizable") > -1) {

        taSizable.push(taElements[i]);

    }

    }

    for (i = 0; i < taSizable.length; i++) {

    taSizable[i].onkeyup = sx_ajustSize;

    taSizable[i].onchange = sx_ajustSize;

    sx_fireEvent(taSizable[i],"keyup");

    }

}

function sx_fireEvent(obj, evt) {

  var fireOnThis = obj;

  if (document.createEvent) {

    var evObj = document.createEvent("MouseEvents");

    evObj.initEvent(evt, true, false);

    fireOnThis.dispatchEvent(evObj);

  }  else if (document.createEventObject) {

    fireOnThis.fireEvent("on" + evt);

  }

}

Примечание. Приведённый код использует prototype-библиотеку: удаление элементов осуществляется с её помощью.

Ссылка на js.