Перенос текста и длинных строк в теге option

25.04.2015

Разве такое возможно? Элементы <option> позволяют работать с однострочным текстом, но благодаря совмещению возможностей CSS и Javascript удалось это осуществить при полном сохранении базовой функциональности списка. Получился весьма перспективный элемент управления, некоторые возможности которого показаны в предлагаемом обзоре.

Основная идея для создания списка с возможностью переноса текста относительно проста: нужно создать поле записи необходимой высоты и в её области разместить несколько следующих неактивных записей списка. То есть, берется первый элемент <option>, и его высота задаётся такой, чтобы в нём поместились следующие несколько элементов <option>, в которых и будут содержаться нужнее строки текста. Эти “дочерние” элементы списка делаются неактивными для правильной навигации по списку.

С реализацией переноса текста также всё просто: исходная строка разделяется на слова (или символы), которые последовательно добавляются в буферную строку. Если длина этой буферной строки в пикселах превышает заданную ширину, то последнее слово (буква) в ней отбрасывается и полученная строка записывается в динамически созданный тег <option>.

Пример списка <select> с многострочными полями (в IE не работает) (код примера можно посмотреть в исходной разметке страницы).

Это интересно, но как использовать такие “гибридные таблицы” на практике? Дело в том, что в общем случае все web-ресурсы можно условно разделить на web-страницы и web-приложения. Конечно, можно сказать, что web-страницы также являются своего рода приложениями, но показанное выше разделение позволяет увидеть два пути развития web. Сейчас web-дизайнеры всеми силами пытаются отмежеваться от оконных приложений, говоря, что сайт не должен выглядеть уныло и серо, как приложения windows. Но при этом ежечасно происходит поиск технологий, которые позволили улучшить, упростить и ускорить работу с web-страницами. Например, при первоначальном знакомстве с технологией AJAX возникает вопрос, а где можно посмотреть сайт, полностью реализованный на AJAX? Найти такой сайт весьма непросто, потому что сайт, созданный полностью на данной технологии, будет являться web-приложением. Готовы ли web-дизайнеры и посетители к восприятию сайта как web-приложения? Нет, несмотря на целый ряд весомых преимуществ web-приложений над сайтами. Дело доходит до того, что один  и тот же элемент управления или механизм работы в оконном приложении и в браузере воспринимается по-разному. Недавно, кстати, мне пришлось столкнуться с такой ситуацией. Заказчик интернет-магазина непременно хочет увидеть двухуровневое выпадающее меню и всё, что связано с заказом, должно иметь шрифт от 18px и при заказе должна быть анимация полёта изображения заказанного товара в корзину, потому что ему кажется, что посетители нажимают на кнопки, но не видят, попал ли заказ в корзину или нет. Хорошо, но тогда как пользователи умудряются составлять заказы в Excel? В Excel нет никакой анимации, и заказываемое количество просто вводится в ячейку. Как же тогда он определяет, заказан товар или нет? Можно сделать простой эксперимент: загрузить в браузер Word и посмотреть, что будет. А будет весело, потому что некоторые пользователи не поймут, как в этой программе набирать текст, потому что им вбили в голову или они сами додумались до того, что windows – это одно, а web – это совсем другое. Если web - это другое, то, очевидно, и работает он иначе, и воспринимать его следует иначе. Разместите список-таблицу на странице и многие войдут в ступор, потому что они привыкли, что на web-страницах нужно щелкать по ссылкам, а ссылок в списке нет и что делать? В 1С они быстро подбирают товар в счет, а аналогичную операцию на странице сделать не смогут, потому что web - это другое.

Список с многострочными полями – это прекрасно, но это элемент web-приложения, к разработке и восприятию которых нужно подходить иначе, нежели к созданию типичных web-страниц. Если этого не сделать, то элементы управления формы будут восприниматься как факультатив к основе – HTML5 и стилям. Куда же их приспособить кроме формы? Да, сейчас невозможно осуществить тонкую и полную настройку внешнего вида элементов управления формы, но ради практичности списка-таблицы я готов “стерпеть” присутствие серой полосы прокрутки на страницах. Красота спасёт мир, но угробит web, если слишком сильно зацикливаться на этом.