Главная » Полезные статьи » Язык JavaScript » Редактирование текстовых элементов
Распечатать статью

Редактирование текстовых элементов

В версию 5.5, всенародно любимого браузера ;), ввели очень интересное свойство contentEditable. Используя это свойство к любому элементу HTML-документа, вы можете его (элемент) редактировать прямо в окне браузера (elementID.contentEditable=true). А самое главное то, что после внесения изменений, можно отключить редактирование и наслаждаться результатом не перезагружая сам документ (elementID.contentEditable=false). Теперь Internet Explorer можно использовать как простенький WYSIWYG-редактор.


Пример использования редактирования элемента:

<html><head><title> Редактируем DIV </title> </head> <body bgcolor=white text=black> <div contentEditable=true> Этот текст редактируемый. </div> </body></html>

Также, вы можете создать кнопку которая будет переключать режимы редактирования (включить/отключить). В этом вам поможет свойство isContentEditable, которое возвращает true если объект можно редактировать, или false если нельзя.

Добавим в наш пример кнопку (включить/отключить):

<html><head><title> Редактируем DIV </title> <script language=jscript> function onOff(){ sButton.value = (eDiv2.isContentEditable) ? "включить редактирование" : "отключить редактирование"; eDiv2.contentEditable = (eDiv2.isContentEditable) ? false : true; } </script> </head> <body bgcolor=white text=black> <div id=eDiv2 contentEditable=false> Этот текст редактируемый.</div> <p><button id=sButton onClick=onOff(); style=width:240px;> включить редактирование</button> </body></html>

Но это не все! Для изменения начертания редактируемого текста, вы можете использовать клавиатурные сокращения. Не полный список представлен в таблице:

Не полный список клавиатурных сокращений. Ctrl + B полужирный (тег STRONG).

Ctrl + I курсив (тег EM).
Ctrl + U подчеркнутый (тег U).
Ctrl + K создать ссылку (тег А).
ENTER параграф (тег P)
Shift + ENTER перевод строки (тег BR)
Ctrl + Alt + C его величество copyright ©

Источник:  internet-technologies.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

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