Атрибут contenteditable

Ми вже давно використовуємо різні технології для редагування та зберігання тексту у браузері. З атрибутом contenteditable це стає набагато простіше. У цій статті я розповім навіщо цей атрибут, як він працює і куди нам рухатися далі.

Давайте звернемося до специфікації:

Атрибут contenteditable має фіксований набір значень, він може бути порожнім рядком, true або false . Порожній рядок або true означає, що елемент доступний для редагування. false означає, що елемент недоступний для редагування. Є ще третій стан — inherit, це значення атрибуту за умовчанням і означає, що значення успадковується від батьківського елемента.

Як згадувалося вище, contenteditable може бути в трьох можливих станах:

1. contenteditable="" або contenteditable="true" означає, що елемент доступний для редагування
2. contenteditable="false" означає, що елемент недоступний для редагування
3. contenteditable="inherit" означає, що елемент доступний для редагування у випадку, якщо його безпосередній батько доступний для редагування. Це значення стандартного атрибута.

Коли ви додаєте елементу атрибут contenteditable, браузер робить його доступним для редагування. Крім того, всі нащадки цього елемента також стають доступними для редагування, якщо атрибут contenteditable у них явно не встановлений у false.

Приклад коду

Демонстрація

Ось два простих приклади, що показують роботу contenteditable :

Все, що знаходиться в цьому блоці, доступне для редагування у браузерах, що підтримують HTML5. Спробуйте: клацніть для початку редагування.

Я використовував CSS для створення оформлення, що показує, що текст доступний дляредагування. Зверніть увагу на орієнтоване на майбутнє використання

Редагування таблиці стилів

Підтримка браузерами

Підтримка атрибуту contenteditable браузерами на диво хороша:

Браузер Версія

Chrome	4.0+
Safari	3.1+
Mobile Safari	5.0+
Firefox	3.5+
Opera	9.0+
Opera Mini/Mobile	Ні
Internet Explorer	5.5+
Android	3.0+

Підтримка браузерами властивості contenteditable

Докладнішу таблицю сумісності можна побачити тут: When Can I Use.

Збереження змін

Для написання цього розділу я звернувся за допомогою до доктора Ремі, оскільки він набагато більше обізнаний у всьому, що стосується зберігання даних всього на світі.

Залежно від складності блоку ваш код може відловлювати натискання Enter (код 13) для збереження зміни та Esc (код 27) для їх скасування.

Коли користувач натискає Enter (припускаємо, що редагуємо однорядкові дані), отримуємо innerHTML блоку, що редагується, і посилаємо AJAX-запит зі змінами на сервер.

Висновок

Атрибут contenteditable — один з найвідоміших, але можу посперечатися, що ви будете використовувати його частіше, ніж думаєте.

Читати далі

Переклад виконав Антон Нємцев (SilentImp).

Коментарі +

У мене досить великий досвід роботи ContentEditable областями, тому хотілося б поділитися своїми думками щодо цього.

А можна ваш твіттер або ще чогось хорошого, щоб я міг уважно стежити за вами в невиразній надії на блек-джек?

SilentImp, дивіться лівий сайдбар (блок "Посилання") - там усі контакти.

mihdan, посилання на контактну інформацію Василя Аксьонова? Я був би трохи здивований.

Дякую! Стаття цікава.

Радий бути корисним.

1. execCommand в тіні якраз є, вони його перекривають і розширюють, дозволяють викликати ще купу команд і додавати свої 2. Якби вони були зроблені оскільки вони зроблені і при цьому відповідали стандарту - вони все одно були б пеклом :D

Щодо останнього — не впевнений. Методи реалізовані на рівні браузера швидше за все будуть виконуватися значно швидше, ніж ті, які будуть реалізовані на рівні скрипту. Або я помиляюсь?

---