HTML5 за 10 минут

Внутристрочное редактирование


Согласно спецификации элементы HTML5 допускается редактировать. Это означает, что пользователь может править их содержимое. В действительности редактируемым можно сделать весь документ, что и будет рассмотрено в этой главе.

Здесь имеются в виду не только текстовые поля. Когда элементы делают редактируемыми, в их число можно включить любые типы элементов, в том числе и элементы <div>.

В этой главе вам предстоит сделать редактируемым элемент <div>. Это означает, что когда пользователь щелкнет кнопкой мыши на этом элементе, появится знак вставки, указывающий на место для ввода текста. Пользователь может также отформатировать текст, как будет показано далее.

Кроме того, мы сделаем редактируемым весь документ, включая и элемент <if гаше>. Пользователю будет даже предоставлена возможность орфографической проверки введенного им текста.

А теперь перейдем непосредственно к рассмотрению средств внутристрочного редактирования.

Общее представление о внутристрочном редактировании

Для организации внутристрочного редактирования можно воспользоваться тремя атрибутами.

•    Атрибут contenteditable. Делает редактируемыми отдельные элементы HTML.

•    Атрибут designmode. Делает редактируемым весь документ.

•    Атрибут spellcheck. Активизирует проверку орфографии. Рассмотрим эти атрибуты по отдельности.

Атрибут contenteditable, делающий редактируемыми отдельные элементы

Поддерживающие браузеры: Chrome, Firefox, IE, Safari, Opera

В HTML5 отдельный элемент можно сделать редактируемым с помощью атрибута contenteditable. В этом атрибуте можно установить три значения.

•    Логическое значение true. Делает содержимое элемента редактируемым.

•    Логическое значение false. Делает содержимое элемента нередактируемым.

•    Значение inherit. Делает данный атрибут таким же, как и у родительского элемента.

В рассматриваемом далее примере HTML-документа editdiv. html в атрибуте contenteditable элемента <div> будет установлено логическое значение true. Благодаря этому пользователь получит возможность вводить текст в элементе <div>.

Атрибут designmode, делающий редактируемыми документы

Поддерживающие браузеры: Chrome, Firefox, IE, Safari, Opera

Это атрибут самого документа, поэтому с его помощью можно сделать редактируемым весь документ. В атрибуте designmode можно установить два значения.

•    Значение on. Включает атрибут designmode, делая документ редактируемым.

•    Значение off. Выключает атрибут designmode, делая документ нередактируемым.

В рассматриваемом далее примере HTML-документа editif гаше. html в атрибуте designmode будет установлено значение on. Благодаря этому пользователь получит возможность править документ в элементе <if rame>.

Комментарии закрыты