contenteditable атрибут
Ние използваме различни технологии за редактиране и съхраняване на текст в браузъра от дълго време. С атрибута contenteditable това става много по-лесно. В тази статия ще ви разкажа за какво служи този атрибут, как работи и накъде да отидем след това.
Нека да разгледаме спецификацията:
Атрибутът contenteditable има фиксиран набор от стойности, може да бъде празен низ, true или false. Празен низ или true означава, че елементът може да се редактира. false означава, че елементът не може да се редактира. Има и трето състояние - inherit , това е стойността по подразбиране на атрибута и означава, че стойността е наследена от родителския елемент.
Както бе споменато по-горе, contenteditable може да бъде в три възможни състояния:
- contenteditable="" или contenteditable="true" означава, че елементът може да се редактира
- contenteditable="false" означава, че елементът не може да се редактира
- contenteditable="inherit" означава, че елементът може да се редактира, ако неговият непосредствен родител може да се редактира. Това е стойността по подразбиране на атрибута.
Когато добавите атрибута contenteditable към елемент, браузърът го прави редактируем. В допълнение, всички наследници на този елемент също стават редактируеми, освен ако техният атрибут contenteditable не е изрично зададен на false.
Примерен код
Демонстрация
Ето два прости примера, показващи как работи contenteditable:
Всичко в този блок може да се редактира в браузъри, които поддържат HTML5. Нека опитаме: щракнете, за да започнете да редактирате.
Използвах CSS, за да създам декорация, за да покажа, че текстът е достъпен заредактиране. Обърнете внимание на употребата, ориентирана към бъдещето
Редактиране на лист със стилове
Поддръжка на браузър
Поддръжката на браузъра за атрибута contenteditable е изненадващо добра:
Версия на браузъра| Chrome | 4.0+ |
| сафари | 3.1+ |
| мобилно сафари | 5.0+ |
| Firefox | 3,5+ |
| Опера | 9.0+ |
| Opera Mini/Mobile | Не |
| Internet Explorer | 5,5+ |
| Android | 3.0+ |
Поддръжка на браузър за свойството contenteditable
По-подробна таблица за съвместимост може да видите тук: Кога мога да използвам.
Запазване на промените
За този раздел потърсих помощта на д-р Реми, тъй като той е много по-информиран за всичко, свързано със съхранението на данни за всичко на света.
В зависимост от сложността на блока, вашият код може да улови Enter (код 13), за да запазите промените и Esc (код 27), за да ги отмените.
Когато потребителят натисне Enter (ако приемем, че редактираме едноредови данни), получаваме вътрешния HTML на редактирания блок и изпращаме AJAX заявка с промените към сървъра.
Заключение
Атрибутът contenteditable е един от най-неясните, но се обзалагам, че ще го използвате повече, отколкото си мислите.
Прочетете още
Превод Антон Немцев (SilentImp).
Коментари +
Имам доста голям опит с ContentEditable области, така че бих искал да споделя мислите си по този въпрос.
Какво ще кажете за вашия twitter или нещо добро, за да мога да ви следя отблизо в смътната надежда за блекджек?
SilentImp, вижте лявата странична лента (блок "Връзки") - всички контакти са там.
mihdan, връзки към информацията за контакт на Василий Аксенов? Бих се изненадал донякъде...
Благодаря ти ! Статията е интересна.
Радвам се, че съм полезен.
1. execCommand в tini е точно същото, те се припокриват и разширяват, позволяват ви да извиквате още куп команди и да добавяте свои собствени 2. Ако бяха направени така, както са направени и в същото време отговаряха на стандарта - пак щяха да са ад :D
За последното не съм сигурен. Методите, внедрени на ниво браузър, вероятно ще работят много по-бързо от тези, внедрени на ниво скрипт. Или греша?