Посадив Кэт в машину, Штирлиц с облегчением сказал:
— Ну вот и всё, теперь можно трогать!
— Ого! — потрогав, сказала Кэт.
Иногда хочется сделать что-то очень быстро и прямо в том месте, где сейчас находишься. На английском языке я бы назвал это просто just-in-place, а на JavaScript описал бы не очень сложным, но очень полезным, по моему мнению, кодом.
Для начала нужно определится с тем, что мы хотим получить в конечном счёте. Рисуем себе в мыслях этакий незаметный заголовок, при двойном клике на котором происходит превращение во вполне редактируемый себе элемент, содержимое которого можно изменить. Здесь можно фантазировать и фантазировать (главное, чтобы фантазии укладывались в рамки стандартов CSS), но я в итоге пришёл к минималистичному исполнению: по умолчанию элемент ничем не выделяется, но если кликнуть по нему дважды, он становится текстовым элементов ввода, стиль которого соответствует стилю текста, который должен быть отредактирован. Стоит заметить, что происходит автоматический выбор редактируемого элемента. Выбор этот зависит от вполне конкретного значения, а именно — от длины содержимого элемента. Весь элемент у нас теперь как на ладони, приступим к конкретике.
Наводим красоту
Создадим два небольших класса и определим непосредственный стиль для двух конкретных элементов.
Стиль, конечно же, всегда можно переиначить под собственный лад (а иначе какой смысл в CSS и трёхкитовом разделении, согласитесь?)
Действие порождает действие
Я сразу оговорюсь об использовании специальных функций, который были описаны уже довольно давно. Эти функции называются bind и listen.
Помимо этого, всё чаще ловлю себя на использовании гибрида данных двух функций:
Но не будем углубляться за зайцами в леса, когда они под носом бегают. Как обычно, будем реализовывать конкретную классовую обёртку для нашего действия. Начнём с общих форм и очертаний:
Класс имеет один входящий параметр — идентификатор поля, которое должно стать редактируемым just-in-place. Также вы заметили две странные переменные: callback_begin_edit и callback_finish_edit, которые намерены вызываться в тот момент, когда начинается (или оканчивается же) редактирование нашего поля.
Ну что ж, приступим к кульминации? Присоединим событие двойного клика по полю к нашей функции-обработчику.
Вот тепеть приступаем к реализации «начинки» нашей функции управления кликом по элементу.
На первый взгляд... всё! Но на самом деле, есть одна проблема.
Балет
В браузере Opera обработчик, назначенный на событие двойного клика мышкой вызван быть не может (уж не знаю, чем это может быть обусловлено, может быть баг, может быть и нет). Поэтому наш код стоит модифицировать для его рабоспособности.
Добавим обходящий обработчик событий и проверку типа браузера.
Для полной работоспособности данного кода нужно добавить нам ещё одну переменную.
Всё готово, применять всё это — проще простого.
Заключение экспертизы
Вот, собственно, и всё на сегодняшний день. Можно к этому добавить live-пример на сайте, что я и сделаю. Хочу лишь добавить, что вкупе с другими средствами, такие поля можно использовать достаточно активно (для быстрого редактирования чего-либо). Я нахожу их очень удобными и, разумеется, найду то место, где применю их (а точнее, я уже нашёл).
