Contenteditable — редактирование контента «на лету»

Contenteditable - редактирование контента на лету

От автора: в этом и следующем уроках мы познакомимся с одним из новых атрибутов в HTML5 под названием contenteditable. Из самого названия понятно, что данный атрибут как-то связан с редактированием контента. И действительно, он позволяет редактировать содержимое элементов прямо на странице.

скачать исходникискачать урок

Думаю, вы уже догадались, где это может пригодиться и строите планы на использование этого атрибута. Использование данного атрибута очень удобно, скажем, для некоторых разделов админки сайта, где необходимо производить быстрое редактирование заголовков, настроек и т.п.

В этих уроках мы рассмотрим практическое использование атрибута contenteditable и реализуем редактирование настроек сайта буквально «на лету». Для примера воспользуемся простой таблицей в БД с настройками какого-либо сайта (дамп таблицы вы найдете в исходниках к уроку).

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Создадим 3 файла: index.php, config.php и functions.php. В индексный файл будем выводить таблицу с настройками, в файле config.php будем хранить подключение к БД, а в файле functions.php опишем функции для работы с данными.

Подключимся к БД в файле config.php, используя необходимые настройки:

Сам файл конфигурации, а заодно и файл функций, подключим вверху файла index.php:

Теперь в файле функций опишем несложную функцию, получающую данные из таблицы настроек:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Получим результат работы функции в индексном файле в массив $options:

Далее в индексном файле создадим простую разметку и выведем в цикле настройки в таблицу. Заодно подключим библиотеку jQuery и наш будущий файл скрипта script.js, который не забудьте создать. В итоге содержимое индексного файла будет следующим:

Как видим, здесь мы в последнюю ячейку со значениями опций поместили элемент div с атрибутом contenteditable. Теперь содержимое данного элемента будет доступно для редактирования. Далее оформим таблицу с помощью стилей:

И, наконец, напишем несколько строк клиентского кода в файле script.js:

Данными строками мы отслеживаем событие нажатия клавиш и при нажатии клавиши Enter мы запрещаем ее поведение по умолчанию, т.е. запрещаем перенос строк для редактируемого контента. Также при получении фокуса для того или иного элемента с настройкой, мы получаем текущее значение настройки и ID опции. ID нам понадобится в будущем для запроса к БД, а вот текущее значение настройки необходимо для того, чтобы сравнить его со значением после потери элементом фокуса. Если эти значения будут отличаться, значит, пользователь изменял настройку, и нам необходим запрос к БД для сохранения нового значения.

На этом мы завершим текущий урок. Удачи и до новых встреч!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Смотреть

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (18)

  1. Анатолий

    Благодарю Вас Андрей за ваши уроки, в этом году я посветил изучением ваших курсов…. хотел бы так же знать языки программирования как и вы )). Огромное Вам Спасибо!

  2. Игорь

    Где у вас кнопка перехода к следующему уроку?

  3. Анатолий

    Доброго дня!
    Андрей, пытаюсь найти, какой плагин вы поставили для программы sublime text 2 для быстрого подключения jquery

    и какую комбинацию сделали ….
    Спасибо за помощь!

    • Андрей Кудлай

      Здравствуйте, Анатолий.
      Это не плагин, это сниппет, т.е. сохраненный код, который вызывается горячей клавишей (Tab). Здесь, к примеру, можно прочесть, как создать сниппет.

  4. masik

    Андрей, спасибо за прекрасные уроки.
    Твой сайт у меня на первом месте.
    И вдогонку вопрос:
    Можно ли сделать все это, но только на текстовых файлах?

    • Андрей Кудлай

      Пожалуйста)
      Да, в качестве хранилища данных, конечно же, может выступать текстовый файл. Если интересует вопрос реализации, то в одном из следующих уроков можно показать принцип реализации.

      • masik

        Андрей Кудлай Если интересует вопрос реализации, то в одном из следующих уроков можно показать принцип реализации.

        Да, очень интересует.
        Недавно, при переезде на новый хостинг потерял половину базы данных.
        Теперь решил освоить текстовые базы. С твоей помощью, конечно.
        С уважением…

  5. Екатерина

    Андрей здравствуйте, очень вам благодарна, ваш урок — ценный вклад в мои знания по web-программированию, подскажите пожалуйста а как теперь эти изменения в таблице сохранить в БД?

  6. Екатерина

    Простите, нашла. Шикарные уроки!!!

  7. ЖЕНЕК

    Подскажите можно как то сделать что бы в contenteditable был хотя бы 1 символ, т.е можно удалять все кроме одного.

    • Андрей Кудлай

      Можно. Как вариант, средствами JS считать количество символов в поле и, если значение станет равно единице, тогда с каждым нажатие кнопок, связанных с удалением (Backspace, Delete), сообщать пользователю о необходимости наличия хотя бы одного символа. Также можно и без JS просто на сервере проверять поле и, если оно окажется пустым — возвращать пользователю соответствующее сообщение. Есть и другие варианты решения.

  8. Дмитрий

    Отличный урок! Спасибо огромное, многое узнал — и по самой теме, и заодно по css и js! Очень радует, что есть видеоурок и исходники. Прикрутил все к своему сайту, все работает! Радует также подробность рассказа, все доступно и просто. Автору респект, продолжай доброе дело!!!

  9. Анатолий

    К сожалению,не понял,как сделать,чтобы данные сохранялись в базе данных. Ввожу значения,но после обновления страницы они не сохраняются. Подскажите пожалуйста,что делать?

Добавить комментарий