В предверии супер-дивного-хабра, своими руками исправляем небольшие недоработки хабра текущего. Например, двухстрочного окошка для ответа на комментарий, из-за которого становятся очень неудобными написание и проверка больших комментариев.

Итак, если у вас браузер Opera, вам очень повезло (такое же дополнение к Firefox — правда, смотрите P.S. :) ):

Шаг первый. Задаём папку для пользовательских JavaScript файлов: Инструменты (Tools) → Настройки (Preferences) → Дополнительно (Advanced) → Содержимое (Content) → Параметры JavaScript (JavaScript options) → «Файлы пользователя JavaScript» (User JavaScript files)

Шаг второй. Копируем в заданную нами папку этот файл (обсуждение)

Готово.

Теперь, наводя мышку на любое поле TextArea на любом сайте, в правом нижнем уголке у вас будет удобное местечко, за которое можно ухватиться и потаскать:

Задача:
Сделать поле ввода комментариев (textarea) на форме так, чтобы его размер (высота) изменялась согласно количеству (строк) текста.
Пользователь может ввести пару слов в одну строку или вставить табличку высотой двадцать строк из экселя — поле ввода должно автоматически увеличиться/уменьшиться.
Длина строк различна (форма резиновая и зависит от размера окна браузера), строки могут переноситься как по \r\n, так и просто, если не вмещаются по ширине.
В принципе, нужна формула подсчёта количества строк текста, чтобы менять атрибут rows у textarea.

Javascript приветствуется. Если решение возможно только средствами html/css, то ещё лучше.

Решения:

Столкнулся в очередной раз с проблемой, возникающей при попытке задать 100%-ю ширину элементу, расположенному в блоках, которые имеют ненулевые padding-и или margin-ы. В случае с textarea получается следующее: при первом отображении ширина устанавливается такая, как было задумано, ничего нигде не вылазит, но стоит только что-то набрать — поле расширяется за пределы блока, в который оно вставлено (только ИЕ).

В этот раз искать обходные пути, не содержащие отступов и хаки (типа "// width: 90%"), не собирался, — дерево комментариев — не место для извращений. Перепробовал разные варианты, но моё поле ввода всё-равно частично пряталось под границами родительского элемента (либо вылазило поверх него).

Вспомнил про Хабр, полез в код, а там форма засунута в . Хм, думаю, а чего у меня это не работало? Открываю Хабр в ИЕ6 — так и тут не работает:



В результате проб и ошибок пришёл к такому решению:

#comment_form .textarea { position: relative; height: 64px; margin-bottom: 8px; }
#comment_form .textarea textarea { position: absolute; width: 100%; height: 64px; }



(чем глубже в дереве комментариев, тем хуже)

Описание проблемы и вариант решения был в посте, который слишком быстро попал в отхабренные. Но проблема есть, и она должна быть услышана. Простите за навязчивость. :)

ывапывапыва

Наверное, многие, начинающие изучать XSLT, сталкивались с проблемой — textarea в режиме вывода XML выводится как одиночный закрытый тэг:
<textarea name="text" id="text"/>
, а не как пара тэгов с нулевым ребенком:
<textarea name="text" id="text"></textarea>

Предлагаю вашему вниманию очередной способ создания текстового поля с динамически изменяемой высотой — Another TextArea Autogrow. Сделал его, как плагин к jQuery, но кому понадобится «чистое» решение без проблем смогут его «отвязать». Прежние решения имели ощутимые минусы, это и высокая нагрузка на процессор, при печати или вставке, «уголок» в safari, по-разному работают в разных браузерах, ну и дёрганье. Я попытался избавится от всех этих минусов, насколько получилось, судить вам.

Отличие данного решения от предыдущих, в повышенной производительности и в простоте. Из дополнительных параметров лишь { timer:100 }, который отвечает за то, с какой частотой будет обрабатываться поле. Можно поставить 200 и более для минимальной нагрузки на процессор, но это может вызвать некоторое «запоздание» в работе. Отличные от дефолтовых падинги и бордеры в текстовом поле пока не поддерживаются, minHeight так же, добавлю чуть позже.

Временная страничка плагина http://figovo.com/.

Эта статья покажет, как в современных браузерах можно сделать подсветку текста в поле редактирования (WYSIWYG).
Пример можно посмотреть, в google.docs или на некоторых продвинутых форумах.

Уверен, многим это будет интересно.

Атрибут contentEditable и параметр designMode

Именно contentEditable или designMode и делает для нас всю основную «грязную» работу.

Если этот атрибут поставить в тег, то всё, что внутри тега, становится автоматически редактируемым.

<html><head></head><body>
  <div contentEditable="true"><b>C</b>ontent<u>!!!</u></div>
</body></html>

работающий пример

Этот атрибут не поддерживается сейчас некоторыми старыми браузерами (например, FireFox 2.0). Но есть более «глобальный» параметр страницы, который сейчас поддерживают все браузеры, который нам может помочь —

Обычно я занимаюсь серверным программированием на php, но время от времени выхожу наружу и копаюсь в верстке, стилях и яваскрипте. Недавно передо мной была поставлена задача изменять высоту textarea при вводе комментариев к различным объектам. В интернете материала по этому поводу так, сказать было не мало и не много. Первый взгляд устремился к реализованным решениям в таких крупных сетех как Вконтакте, Facebook, МойКруг. Однако, во время решения было множество препятствий и далеко не кросбраузерность.

Добрый день.

В разработке интерфейсов иногда можно встретиться с задачей выделения вводимого пользователем текста в зависимости от определенных условий. (Например, была реализована серверная проверка грамматики, либо необходимо выделять определенным цветом те или иные слова\участки и т.д.)
Однако, элемент textarea не поддерживает html\bb теги. Как один из способов решения — использование contenteditable в элементах div.
В данной небольшой статье я предлагаю более-менее подробно рассмотреть способ выделения текста, используя textarea.

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

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

Мефистофель, в «Фаусте» Гёте


Формы были кратко представлены в предыдущей главе в качестве способа передачи информации, введённой пользователем, через HTTP. Они были разработаны в вебе до появления JavaScript, с тем расчётом, что взаимодействие с сервером происходит при переходе на другую страницу.

Но их элементы являются частями DOM, как и остальные части страницы, а элементы DOM, представляющие поля формы, поддерживают несколько свойств и событий, которых нет у других элементов. Это делает возможным просматривать и управлять полями ввода из программ JavaScript и добавлять функциональности к классическим формам или использовать формы и поля как основу для построения приложения.