Как стать автором
Обновить

Расширяем окошко для комментариев

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

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

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

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

Готово.

Теперь, наводя мышку на любое поле TextArea на любом сайте, в правом нижнем уголке у вас будет удобное местечко, за которое можно ухватиться и потаскать:
Читать дальше →
Всего голосов 17: ↑15 и ↓2 +13
Просмотры 321
Комментарии 25

Динамически изменяющееся поле ввода текста. Возможно ли такое?

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

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

Решения:
Читать дальше →
Всего голосов 22: ↑20 и ↓2 +18
Просмотры 11K
Комментарии 46

Лечим 100%-широкий textarea, попавший под padding в IE (на Хабре тоже)

Разработка веб-сайтов *
Столкнулся в очередной раз с проблемой, возникающей при попытке задать 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; }

Всего голосов 16: ↑10 и ↓6 +4
Просмотры 2K
Комментарии 9

В IE6 разлазится textarea (в форме добавления комментария)

Habr

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

Описание проблемы и вариант решения был в посте, который слишком быстро попал в отхабренные. Но проблема есть, и она должна быть услышана. Простите за навязчивость. :)
Всего голосов 41: ↑24 и ↓17 +7
Просмотры 622
Комментарии 28

Правильный textarea в XSLT с методом вывода XML

XSLT *
Наверное, многие, начинающие изучать XSLT, сталкивались с проблемой — textarea в режиме вывода XML выводится как одиночный закрытый тэг:
<textarea name="text" id="text"/>
, а не как пара тэгов с нулевым ребенком:
<textarea name="text" id="text"></textarea>
Читать дальше →
Всего голосов 28: ↑25 и ↓3 +22
Просмотры 2.2K
Комментарии 32

Очередной способ создания текстового поля с динамически изменяемой высотой

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

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

Временная страничка плагина http://figovo.com/.
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 310
Комментарии 21

Подсветка текста в «TextArea»

JavaScript *
Эта статья покажет, как в современных браузерах можно сделать подсветку текста в поле редактирования (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). Но есть более «глобальный» параметр страницы, который сейчас поддерживают все браузеры, который нам может помочь —
designMode
Всего голосов 64: ↑55 и ↓9 +46
Просмотры 18K
Комментарии 28

Автоизменение высоты textarea при вводе текста

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

Читать дальше →
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 56K
Комментарии 12

Организуем выделение текста в textarea

CSS *JavaScript *
Tutorial
Добрый день.

В разработке интерфейсов иногда можно встретиться с задачей выделения вводимого пользователем текста в зависимости от определенных условий. (Например, была реализована серверная проверка грамматики, либо необходимо выделять определенным цветом те или иные слова\участки и т.д.)
Однако, элемент textarea не поддерживает html\bb теги. Как один из способов решения — использование contenteditable в элементах div.
В данной небольшой статье я предлагаю более-менее подробно рассмотреть способ выделения текста, используя textarea.
Читать дальше →
Всего голосов 37: ↑35 и ↓2 +33
Просмотры 22K
Комментарии 14

Выразительный JavaScript: Формы и поля форм

JavaScript *Программирование *

Содержание




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

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


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

Но их элементы являются частями DOM, как и остальные части страницы, а элементы DOM, представляющие поля формы, поддерживают несколько свойств и событий, которых нет у других элементов. Это делает возможным просматривать и управлять полями ввода из программ JavaScript и добавлять функциональности к классическим формам или использовать формы и поля как основу для построения приложения.
Читать дальше →
Всего голосов 22: ↑22 и ↓0 +22
Просмотры 181K
Комментарии 13